Field primitive

Use the field primitives to build a custom field with Luke UI labels, descriptions, and validation messages. Application code should usually use a composed field such as TextField or ComboboxField.

import { Field, FieldDescription, FieldError, FieldLabel } from '@luke-ui/react/field/primitive';

Anatomy

Field arranges a label, your control, an optional description, and a validation message. Pass label, description, and errorMessage to use its standard slots.

<Field description="Use your work email." label="Email">
	<input />
</Field>

For a custom structure, use FieldLabel, FieldDescription, and FieldError with the field control. Keep their relationship to the control intact so React Aria can expose the label, description, and error semantics.

Required fields

necessityIndicator controls how FieldLabel marks a required field. Its default is icon. Use the supported values from the API table when a different required-field convention is needed.

<Field label="Email" necessityIndicator="label">
	<input required />
</Field>

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.