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 someone types and is not a reliable accessible name.

When a nearby heading already names the field, omit label. 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

Set isRequired, type, or pattern, or pass validate to check the value. TextField shows its validation message after validation fails. Pass errorMessage only for an error you already have, such as one from a form library or your server. A non-empty message marks the field invalid. Read Validation for where messages come from, server errors, and how to write them.

Prefix and suffix

Use prefix and suffix for content inside the input, such as a search icon, currency code, or URL scheme. Both accept any ReactNode. Give an interactive prefix or suffix 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.

Accessibility

Give the field a visible label where possible. A placeholder is not a reliable accessible name.

Luke UI associates the label, description, and error message with the control.

Related components

Use the InputGroup primitives when you need an input without the label, description, and error slots. Also use them for a composition that prefix and suffix cannot express.

API