TextInput
Accessible single-line React text field with built-in label, helper text, error message, prefix and suffix adornments, and fill styles. Arabic and RTL ready.
TextInput owns its label and field wiring. Use helperText and errorMessage for states, and startAdornment/endAdornment for icons or units inside the field.
When to use
Use TextInput for short free-text values: names, national addresses, reference numbers, emails. Use Textarea for multi-line text, NumberInput for numeric values with steppers, and SearchBox for search.
Put units, currency symbols, or icons in startAdornment and endAdornment rather than in the placeholder, so they stay visible after the user types. Use helperText for format hints such as the expected ID length.
Examples
Props
Props declared by TextInput. Native attributes of the underlying element pass through.
<TextInput>
| Prop | Type | Default | Description |
|---|---|---|---|
size | "md" | "lg" | ||
variant | "default" | "filled-lighter" | "filled-darker" | ||
label | react.ReactNode | Visible field label, auto-associated to the input via htmlFor/id. | |
helperText | react.ReactNode | Hint shown below the field. Hidden while an error message is showing. | |
helperIcon | react.ReactNode | ||
errorMessage | react.ReactNode | Message shown below the field when error is true. | |
error | boolean | Marks the field invalid: sets aria-invalid and error styling. | |
startAdornment | react.ReactNode | Content rendered inside the field, before the input (icon, TextInputAffix,
or short text). Not aria-hidden (may be interactive); mark
purely-decorative icons aria-hidden yourself. | |
endAdornment | react.ReactNode | Content rendered inside the field, after the input. Compose a clear button
or password-reveal toggle here with <Button size="icon-sm">, the 28px
in-field icon size that fits without overflow. |
<TextInputAffix>
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "subtle" | solid = the SDGA gray prefix/suffix chip; subtle = borderless text. |
<TextInputDropdown>
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "subtle" | solid = the SDGA gray dropdown chip; subtle = transparent. | |
icon | react.ReactNode | Leading badge icon (e.g. <BadgeCheck />), sized 24/20 to the field. | |
selected | boolean | Open/selected - paints the SDGA dark #384250 chip + white text. |
<FieldMessage>
| Prop | Type | Default | Description |
|---|---|---|---|
idrequired | string | ||
variantrequired | "error" | "helper" | error announces politely; helper is static. | |
icon | react.ReactNode | Optional 16px leading feedback icon (SDGA helper/error glyph). | |
childrenrequired | react.ReactNode |
Accessibility
The label is wired to the input with htmlFor and id, so clicking it focuses the field and screen readers announce it. helperText and errorMessage are linked through aria-describedby, and error sets aria-invalid. Required fields announce as required.
Do not use the placeholder as the only label. It disappears on input and fails contrast requirements.