Field

A label, a control, a description and the errors that replace it, wired together so each names and describes the others.

Full screen

01Preview

Handle

Shown on everything you share.

Show my handle on shared chats

02Installation

npx shadcn@latest add https://aiellie.app/r/field.json

03API reference

From the Base UI documentation

Groups all parts of the field. Renders a <div> element.

Props

Prop	Type	Default	Description
name	string	-	Identifies the field when a form is submitted. Takes precedence over the `name` prop on the `<Field.Control>` component.
actionsRef	React.RefObject<Field.Root.Actions \| null>	-	A ref to imperative actions. `validate`: Validates the field when called.
dirty	boolean	-	Whether the field's value has been changed from its initial value. Useful when the field state is controlled by an external library.
touched	boolean	-	Whether the field has been touched. Useful when the field state is controlled by an external library.
disabled	boolean	false	Whether the component should ignore user interaction. Takes precedence over the `disabled` prop on the `<Field.Control>` component.
invalid	boolean	-	Whether the field is invalid. Useful when the field state is controlled by an external library.
validate	((value: unknown, formValues: Form.Values) => string \| void \| string[] \| Promise<string \| void \| string[] \| null> \| null)	-	A function for custom validation. Return a string or an array of strings with the error message(s) if the value is invalid. Returning nothing, `null`, an empty string, or an empty array means the value is valid. Asynchronous functions are supported, but they do not prevent form submission when using `validationMode="onSubmit"`.
validationMode	Form.ValidationMode	'onSubmit'	Determines when the field should be validated. This takes precedence over the `validationMode` prop on `<Form>`. `onSubmit`: triggers validation when the form is submitted, and re-validates on change after submission.`onBlur`: triggers validation when the control loses focus.`onChange`: triggers validation on every change to the control value.
validationDebounceTime	number	0	How long to wait between `validate` callbacks if `validationMode="onChange"` is used. Specified in milliseconds.
className	string \| ((state: Field.Root.State) => string \| undefined)	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	React.CSSProperties \| ((state: Field.Root.State) => React.CSSProperties \| undefined)	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	ReactElement \| ((props: HTMLProps, state: Field.Root.State) => ReactElement)	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Data Attributes

Attribute	Type	Description
data-disabled	-	Present when the field is disabled.
data-valid	-	Present when the field is valid.
data-invalid	-	Present when the field is invalid.
data-dirty	-	Present when the field's value has changed.
data-touched	-	Present when the field has been touched.
data-filled	-	Present when the field is filled.
data-focused	-	Present when the field control is focused.