# TextInput (/docs/text-input) `TextInput` is the single-line text field you reach for by default. It's [`Input`](/docs/input) — the same shell, the same slots, the same states — carrying its own `label`, `description`, `error`, and `required` through [`Field`](/docs/field), exactly like [`Textarea`](/docs/textarea), [`Select`](/docs/select), and the rest of the family. ```tsx import { TextInput } from '@42-central/ui-react/text-input'; ``` Native `` props (`value`, `onChange`, `name`, `type`, `autoComplete`, `maxLength`, `ref`, …) forward straight through, so react-hook-form's `register()` binds it with no wrapper. `className` styles the shell root and `classNames` overrides individual parts. Use `TextInput` whenever the field has a label — which is nearly always. Reach for [`Input`](/docs/input) when you're composing the shell yourself: inside a `Field` you already control, or as the search box of a larger widget. Omit every field prop and `TextInput` mounts no `Field` at all, so the two render identically. ## Playground [#playground] ### Full prop browser [#full-prop-browser] ## Label, description & error [#label-description--error] `label` names the control, `description` is helper text above it, and `error` renders below it. Passing `error` flips the field to the invalid (red) state on its own — no separate `invalid` needed. `required` adds the semantic flag and a red asterisk.

`description` and `error` are independent — both can show at once, and the control references each through `aria-describedby` / `aria-errormessage`. ## Sizes [#sizes] Five steps — `xs` through `xl`. The label, helper text, control font, and slot icons all scale together, so a `TextInput` lines up with an `Input`, `Textarea`, or `Select` at the same `size`.

## Variants [#variants] Two shells, shared with the rest of the family. `default` is bordered; `unstyled` strips the chrome but keeps the layout.

## Slots [#slots] `startSlot` and `endSlot` are RTL-aware (start = left in LTR, right in RTL), and icons in them auto-size to the field's `size`. Both wrappers are `aria-hidden`, so keep them decorative — an interactive control belongs in an [`InputBase`](/docs/input#inputbase--custom-controls) you compose yourself.

## Search fields [#search-fields] A search box needs an accessible name, but rarely a visible label — and a `placeholder` is not a substitute, since it disappears the moment someone types. Pass a real `label` and hide it with `classNames={{ label: 'sr-only' }}`: screen readers still announce it, and nothing is added to the layout.

## States [#states] `invalid` swaps the border and focus ring to red (and sets `aria-invalid`) without rendering a message — use it when the error text lives elsewhere, e.g. driven from a form library's `fieldState.invalid`. `disabled` dims the shell and blocks input; `readOnly` keeps full contrast and stays focusable but rejects edits.

## Forms [#forms] `TextInput` is **event-based**, like `Input` and `Textarea`: `onChange` receives the DOM event, so react-hook-form's `register()` binds it directly and no `Controller` is needed. See the [Forms](/docs/forms) guide for the full contract. ```tsx ``` `ref` lands on the underlying ``, so react-hook-form's focus-on-error works out of the box. `invalid` is independent of `error`, so a form library can flip only the red state when the message renders somewhere else. ## Composing with Field [#composing-with-field] Omit every field prop and `TextInput` mounts no `Field` — it renders exactly what a bare `Input` renders, and still inherits an outer `Field` you compose yourself. This matters for layouts where one `Field` wraps several controls: ```tsx import { Field } from '@42-central/ui-react/field'; import { TextInput } from '@42-central/ui-react/text-input';

``` ## API [#api] `TextInput` forwards every other prop to the underlying `` (`value`, `defaultValue`, `onChange`, `name`, `type`, `autoComplete`, `maxLength`, `pattern`, …). `className` styles the shell root. ## Accessibility [#accessibility] * `label` is wired to the input by [`Field`](/docs/field) — clicking it focuses the control, and screen readers announce it as the control's name. * `description` and `error` are associated through `aria-describedby` and `aria-errormessage`, so both are announced without being read as part of the name. * `error` sets `aria-invalid` on the input, so the error state is announced as well as shown. * Never use `placeholder` as the label: it vanishes on first keystroke and is not a reliable accessible name. For a field with no visible label, keep `label` and hide it with `classNames={{ label: 'sr-only' }}` — see [Search fields](#search-fields). * `startSlot` / `endSlot` are `aria-hidden` decorations; anything interactive must be composed into an [`InputBase`](/docs/input#inputbase--custom-controls) instead. * RTL: the shell is a plain flex row, so the slots and padding flip automatically under `dir="rtl"`.