UIDex

Text Input

حقل النص

<input type="text">

also calledtext field، input field، single-line input، text box، form input، entry field، حقل الإدخال، مربّع نص، خانة الكتابة، إنبوت، تكست فيلد، حقل نصّي

A text input is a single-line control where the user types a free value such as a name or an ID number. The value is a string the user composes rather than an option picked from a set the application already knows, and that is the line separating it from the three controls it gets mistaken for. It is not a textarea, which takes multiple lines, carries a resize handle, and is sized with rows instead of size, and where Enter adds a line rather than submitting the form. It is not a combobox, which has a filtering list attached and is declared with role="combobox" plus aria-expanded and aria-controls, so its final value is usually one of the listed options. It is not a search field either; that one is declared with type="search", carries the searchbox role, and in Chrome and Safari gets a native clear button and empties on Escape. A countable set of accepted values wants a list, a full paragraph wants a textarea, and everything between the two is a text input.

If you called it…

"the box where you type your name""the grey words that vanish when you start typing""the line with the little x that wipes what you wrote""the one line thing in the form""the box that goes red when the email is wrong"

Live specimen

Interact with the demo. Every part is real and numbered.

حروف وأرقام فقط4 / 24
رقم بلا فواصل، والأرقام العربية تتحوّل تلقائياً
RTLاكتب حرفاً لاتينياً في الحقل الأول ليقلب dir=auto اتجاهه

Anatomy: every part, named

Hover a row to locate it in the demo above.

Build prompt

Build a single-line text input for an Arabic form. Associate a <label> with for/id and never let the placeholder stand in for it. Pick the type from the content: type="email", type="url", type="tel", and keep type="number" away from phone numbers and IDs because a value holding a +, a space, or a dash reads back from value as an empty string; add inputmode="numeric" or inputmode="decimal" to choose the mobile keyboard, and an autocomplete token from the spec list (email, tel, postal-code, one-time-code). Put the prefix at the logical start and the unit at the logical end, reserve their room with padding-inline-start and padding-inline-end rather than padding-left and padding-right, and pin any overlay with inset-inline-start and inset-inline-end plus pointer-events: none. Show a clear button whenever there is a value, with type="button" and an accessible name that says which field it clears, and return focus to the input after the press. Add a character counter tied to the field with aria-describedby that announces at thresholds only inside an aria-live="polite" region, and isolate its text in a <bdi dir="ltr"> so the figures cannot reorder. Write the format hint before the first keystroke instead of after the error, and link both the hint and the error with aria-describedby alongside aria-invalid. Set dir="auto" on fields that may receive either script, and dir="ltr" on email, URL, and username fields while the label stays Arabic. Normalise Arabic-Indic digits to ASCII before validating and before submitting.

How it behaves right-to-left

This section is ours alone.

Which side the adornments sit on

mirrors

The prefix sits at the logical start of the field, the right in Arabic, while the unit and the clear button sit at the logical end, the left. Reserve their room with padding-inline-start and padding-inline-end, and pin any overlay with inset-inline-start and inset-inline-end. padding-left together with left: 12px stays exactly where it was after the page flips, so the icon lands on top of the text and leaves dead padding on the empty side.

A Latin value inside an Arabic form

never mirrors

An email, URL, or Latin username field takes dir="ltr" on the <input> itself while the <label> and the page stay dir="rtl". Direction on the wrapper is not enough, because the caret position, the text alignment, and the order of neutral characters all follow the field's own direction: type "user@" into an Arabic field with no dir and the symbol appears to the left of the word, reading as "@user", since a neutral at the end of the line takes the paragraph direction. If the value hugging the left edge looks wrong in an Arabic form, add text-align: end to the input: the ordering stays Latin and the alignment returns to the right of the page.

dir="auto" as the default

mirrors

A field that may receive either script (a person's name, an article title, a note) takes dir="auto": the browser reads the first strongly directional character in the value, sets the display direction from it, and recomputes as the value changes. What you store is untouched, since dir sets how the value is displayed and inserts no control characters into the text. One spec exception is worth memorising: an input with type="tel" and dir="auto" is always ltr, because a phone number carries no strongly directional character to resolve.

The order inside the counter

never mirrors

A counter written "12 / 60" flips in an Arabic line and reads "60 / 12". The cause is rule N1 in UAX #9: numbers influence the neutrals around them as if they were right-to-left text, so the spaces and the slash between them take the paragraph direction and the two figures swap places. Isolate the run in a <bdi dir="ltr">, or write it with no separator between two numbers ("48 characters left"). The same thing happens to any range such as "1 - 10" inside an Arabic sentence.

Arabic-Indic digits in the value

never mirrors

Arabic keyboards on Android and iOS may enter the Arabic-Indic digits ٠١٢٣ (U+0660 to U+0669) instead of 0123. Validation with /^\d+$/ rejects them, because \d in JavaScript matches ASCII only, even with the u flag, and Number("١٢٣") returns NaN. Normalise before you validate and before you submit: value.replace(/[\u0660-\u0669]/g, (d) => d.charCodeAt(0) - 0x0660), and add the Persian range U+06F0 to U+06F9 when your users type in it.

In code

Each row is one framework's word for the same thing. Take the row your project speaks.

HTML<input type="text" name="username">name is what gets submitted; id is only what the label points at.
HTMLinputmode="numeric"Changes the mobile keyboard without touching the field type or the validation rules.
HTMLautocomplete="email"The tokens come from a fixed spec list; an invented one is ignored and the autofill is lost.
ARIAaria-describedby + aria-invalid="true"Hint and error are read after the field name, and the state is announced without relying on colour.
CSSpadding-inline-startThe padding that stays on the prefix side after the page direction flips.
Material UI<InputAdornment position="start">Its positions are start and end, so they follow the theme direction instead of a fixed left and right.
Ant Design<Input prefix suffix allowClear />prefix sits inside the field border and addonBefore outside it, while allowClear hands you the clear button.

See also

WebForm FieldWebCombobox / AutocompleteWebDropdown / Select

Updated · 2026-08-19