Text Field

Single-line text input with label, validation, and adornments.

Use TextField for a single text input with label, description, validation, and optional adornments built in.

Best practices

Required fields

Use isRequired and necessityIndicator to communicate mandatory fields. 'icon' renders a visual required marker. 'label' appends "(required)" to the label text.

Validation

Pass field-level validation through React Aria Form. Use errorMessage to render the validation message.

import { Form } from 'react-aria-components';

<Form validationErrors={{ username: 'Username is not available.' }}>
	<TextField
		name="username"
		label="Username"
		errorMessage={(validation) => validation.validationErrors.join(' ')}
	/>
</Form>;

Adornments

Use adornmentStart and adornmentEnd to place non-editable content inside the input chrome. Adornments accept any ReactNode. If an adornment is interactive, you are responsible for its semantics.

Size

size controls height and typography. The HTML numeric <input size> attribute is intentionally omitted because size is reserved for the design-system variant.

Accessibility

When visual context already communicates purpose, you may omit label and provide an accessible name with aria-label or aria-labelledby on the field.

<TextField aria-label="Search" name="search" placeholder="Search" />

Primitive

Use the TextInput primitive when you need the input without the label, description, and error slots that TextField provides.

Props