Field

Provides a flexible container for form inputs, labels, and helper text.

LabelPlease enter your E-Mail

Anatomy

<Field.Root>
  <Field.Label />
  <Field.Input />
  <Field.Textarea />
  <Field.Select />
  <Field.HelperText />
  <Field.ErrorText />
</Field.Root>

Examples

The Field component provides contexts such as invalid, disabled, required, and readOnly for form elements. While most Ark UI components natively support these contexts, you can also use the Field component with standard HTML form elements.

Input

This example shows how to use the Field component with a standard input field.

Textarea

This example illustrates how to use the Field component with a textarea element.

Textarea Autoresize

Pass the autoresize prop to the Textarea component to enable automatic resizing as the user types.

Select

This example demonstrates how to integrate the Field component with a select dropdown.

Checkbox

This example demonstrates how to integrate the Field and Checkbox components.

Root Provider

An alternative way to control the field is to use the RootProvider component and the useField hook. This way you can access the state and methods from outside the component.

Custom Control

Use the Field.Context or useFieldContext hook to access the internal state of the field.This can help you wire up custom controls with the Field component.

API Reference

Root

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`disabled`		`boolean` Indicates whether the field is disabled.
`ids`		`ElementIds` The ids of the field parts.
`invalid`		`boolean` Indicates whether the field is invalid.
`readOnly`		`boolean` Indicates whether the field is read-only.
`required`		`boolean` Indicates whether the field is required.

ErrorText

Renders a <span> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

HelperText

Renders a <span> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Input

Renders a <input> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Label

Renders a <label> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

RequiredIndicator

Renders a <span> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`fallback`		`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`

RootProvider

Renders a <div> element.

Prop	Default	Type
`value`		`{ ariaDescribedby: string \| undefined; ids: { root: string; control: string; label: string; errorText: string; helperText: string; }; refs: { rootRef: RefObject<HTMLDivElement \| null>; }; ... 11 more ...; getRequiredIndicatorProps: () => Omit<...>; }`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Select

Renders a <select> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Textarea

Renders a <textarea> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`autoresize`	`false`	`boolean` Whether the textarea should autoresize