Text Field

Use TextField to collect a single line of text. It combines an input with a label, description, and validation message.

Labels and placeholders

Give the field a visible label where possible. Use placeholder for an example value or input format, not as the label. A placeholder disappears while the person types and is not a reliable accessible name.

When a nearby heading already names the field, omit label and use aria-label or aria-labelledby instead.

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

Required fields

Set isRequired for required fields. necessityIndicator="icon" adds a visual marker. necessityIndicator="label" appends “(required)” to the label.

Validation

Use errorMessage to render a validation message. For client validation, use React Aria validation props. For server validation, pass errors through React Aria Form.

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

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

Adornments

Use adornmentStart and adornmentEnd for content inside the input, such as a search icon, currency code, or URL prefix. Both accept any ReactNode. Give interactive adornments an accessible name and keyboard behaviour.

Size

Use size to set the input height and typography. Use small in compact layouts. medium is the default. The HTML numeric size attribute is unavailable because size is the Luke UI variant.

Primitive

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