# Field

URL: https://ark-ui.com/docs/components/field
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/field.mdx

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: input**

```ripple
import { Field } from 'ark-ripple/field';
import styles from 'styles/field.module.css';

export component Input() {
  <Field.Root class={styles.Root}>
    <Field.Label class={styles.Label}>{'Label'}</Field.Label>
    <Field.Input class={styles.Input} />
    <Field.HelperText class={styles.HelperText}>{'Some additional Info'}</Field.HelperText>
    <Field.ErrorText class={styles.ErrorText}>{'Error Info'}</Field.ErrorText>
  </Field.Root>
}

```

### Textarea

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

**Example: textarea**

```ripple
import { Field } from 'ark-ripple/field';
import styles from 'styles/field.module.css';

export component Textarea() {
  <Field.Root class={styles.Root}>
    <Field.Label class={styles.Label}>{'Label'}</Field.Label>
    <Field.Textarea class={styles.Textarea} />
    <Field.HelperText class={styles.HelperText}>{'Some additional Info'}</Field.HelperText>
    <Field.ErrorText class={styles.ErrorText}>{'Error Info'}</Field.ErrorText>
  </Field.Root>
}

```

### Textarea Autoresize

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

**Example: textarea-autoresize**

```ripple
import { Field } from 'ark-ripple/field';
import styles from 'styles/field.module.css';

export component TextareaAutoresize() {
  <Field.Root class={styles.Root}>
    <Field.Label class={styles.Label}>{'Label'}</Field.Label>
    <Field.Textarea class={styles.Textarea} autoresize />
    <Field.HelperText class={styles.HelperText}>{'Some additional Info'}</Field.HelperText>
    <Field.ErrorText class={styles.ErrorText}>{'Error Info'}</Field.ErrorText>
  </Field.Root>
}

```

### Select

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

**Example: select**

```ripple
import { Field } from 'ark-ripple/field';
import styles from 'styles/field.module.css';

export component Select() {
  <Field.Root class={styles.Root}>
    <Field.Label class={styles.Label}>{'Label'}</Field.Label>
    <Field.Select class={styles.Select}>
      <option value="1">{'Option 1'}</option>
      <option value="2">{'Option 2'}</option>
      <option value="3">{'Option 3'}</option>
    </Field.Select>
    <Field.HelperText class={styles.HelperText}>{'Some additional Info'}</Field.HelperText>
    <Field.ErrorText class={styles.ErrorText}>{'Error Info'}</Field.ErrorText>
  </Field.Root>
}

```

### 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: root-provider**

```ripple
import { Field } from 'ark-ripple/field';
import { useField } from 'ark-ripple/field';
import styles from 'styles/field.module.css';
import button from 'styles/button.module.css';
import { track } from 'ripple';

export component RootProvider() {
  let invalid = track(false);
  const field = useField({ id: 'field', invalid });

  <div class="vstack">
    <button
      class={button.Root}
      style={{ marginBottom: '1rem' }}
      onClick={() => {
        @invalid = !@invalid;
      }}
    >
      {'Toggle Invalid'}
    </button>
    <Field.RootProvider class={styles.Root} value={field}>
      <Field.Label class={styles.Label}>{'Label'}</Field.Label>
      <Field.Input class={styles.Input} />
      <Field.HelperText class={styles.HelperText}>{'Some additional Info'}</Field.HelperText>
      <Field.ErrorText class={styles.ErrorText}>{'Error Info'}</Field.ErrorText>
    </Field.RootProvider>
  </div>
}

```

### 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: custom-control**

```ripple
import { Field } from 'ark-ripple/field';
import styles from 'styles/field.module.css';

export component CustomControl() {
  <Field.Root class={styles.Root} invalid>
    <Field.Label class={styles.Label}>{'Any Control'}</Field.Label>
    <Field.Context>
      component children({ context }) {
        <input class={styles.Input} {...@context.getInputProps()} />
      }
    </Field.Context>
    <Field.HelperText class={styles.HelperText}>
      {'Uses getInputProps() for maximum flexibility'}
    </Field.HelperText>
    <Field.ErrorText class={styles.ErrorText}>{'This field has an error'}</Field.ErrorText>
  </Field.Root>
}

```

## API Reference

**Component API Reference**

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Indicates whether the field is disabled. |
| `ids` | `ElementIds` | No | The ids of the field parts. |
| `invalid` | `boolean` | No | Indicates whether the field is invalid. |
| `readOnly` | `boolean` | No | Indicates whether the field is read-only. |
| `required` | `boolean` | No | Indicates whether the field is required. |
| `target` | `string` | No | The target field item value the label should point to. |


**ErrorText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**HelperText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RequiredIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `fallback` | `string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>` | No |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `{ ariaDescribedby: string | undefined; ids: { root: string; control: string; label: string; errorText: string; helperText: string; }; refs: { rootRef: RefObject<HTMLDivElement | null>; }; ... 11 more ...; getRequiredIndicatorProps: () => Omit<...>; }` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Select Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Textarea Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoresize` | `boolean` | No | Whether the textarea should autoresize |