Field primitive
Shared label, description, and validation parts for custom fields.
Use the field primitives to build a custom field with Luke UI labels, descriptions, and validation
messages. Start with TextField or
ComboboxField when one of those components fits.
Best practices
| Guidance | Practices |
|---|---|
| Do | Use TextField or another supported field when it fits. |
| Do | Use field primitives when a custom control needs a different documented arrangement. |
| Don't | Assume adjacent parts create semantics. Connect the label, description, and control through their public HTML props. |
Anatomy
Field arranges a label, control, description, and validation message. Field components such as
TextField connect these parts for their supported controls.
For a custom structure, use FieldLabel, FieldDescription, and FieldError with the field
control. Connect each part through its public HTML props, as the primary example shows.
Required fields
necessityIndicator changes the visible marker on FieldLabel. It does not make the control
required, so set the required state on the control separately.
Validation messages
Use errorMessage for validation feedback. FieldError is styled for the field error slot and
works with the validation state from the surrounding React Aria form control.
API
FieldProps
FieldProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type
FieldLabelProps
FieldLabelProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type
FieldDescriptionProps
FieldDescriptionProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
FieldErrorProps
FieldErrorProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.