---
id: field
title: Field
description: Provides a flexible container for form inputs, labels, and helper text.
---

<ComponentPreview id="Field" />

## Anatomy

<Anatomy id="field" />

```tsx
<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.

<Example id="input" />

### Textarea

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

<Example id="textarea" />

### Textarea Autoresize

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

<Example id="textarea-autoresize" />

### Select

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

<Example id="select" />

### Checkbox

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

<Example component="checkbox" id="with-field" />

### 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.

<Example id="root-provider" />

### 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.

<Example id="custom-control" />

## API Reference

<ComponentTypes id="field" />
