Field.TextInput

Field.TextInput is a native <input> for one line of text inside a Field. Its value is a string. Pass onChange for the event or onValueChange for the new string, or both; without either, the input is read-only. type takes text, search, email, url, tel or password. When type changes while the input has focus, as a password's show button switches it to text, the caret stays where it was. A number is Field.NumberInput. For a typed date, range of dates, time, or date and time, read the text with parseDate, parseDateRange, parseTime or parseDateTime, beside a Field.DatePicker, Field.DateRangePicker, Field.TimePicker or Field.DateTimePicker. Put id on Field.Root.

const id = useId();

<Field.Group>
  <Label.Root htmlFor={id}>Email</Label.Root>
  <Field.Root id={id}>
    <Field.TextInput value={v} onChange={(event) => setV(event.target.value)} />
  </Field.Root>
</Field.Group>

Accessible composition

Todae handles: The input takes id, name, aria-label, aria-labelledby and aria-describedby from Field.Root, and native disabled and aria-invalid from the Root or a surrounding Fieldset.

You supply: A name, through a Label whose htmlFor is the Root id or aria-label / aria-labelledby on the Root.

Watch for: An id on Field.TextInput is replaced by the Root's; put it on the Root.

When to use

Field.TextInput

When: Single-line typed value inside Field.Root (text / search / email / url / tel / password).

When not: A number → Field.NumberInput. A time → Field.TimePicker. A range of dates → Field.DateRangePicker. A date and time → Field.DateTimePicker. Multi-value tokens → Field.ChipInput. Multi-line → Field.Textarea. Standalone without Root.

Props