Text Input Field

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

Labels and placeholdersCopy Anchor Link

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.

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

Required fieldsCopy Anchor Link

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

ValidationCopy Anchor Link

Set isRequired, type, or pattern, or pass validate to check the value. TextInputField 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 suffixCopy Anchor Link

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.

SizeCopy Anchor Link

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.

IDs and refsCopy Anchor Link

id, className, and ref target the field's root element. Pass inputId to set the input's id, and inputRef to reach the input.

AccessibilityCopy Anchor Link

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

APICopy Anchor Link