# 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" />

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

#### React

```tsx
import { Field } from '@ark-ui/react/field'

export const Input = () => {
  return (
    <Field.Root>
      <Field.Label>Label</Field.Label>
      <Field.Input />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

```

#### Solid

```tsx
import { Field } from '@ark-ui/solid/field'

export const Input = () => {
  return (
    <Field.Root>
      <Field.Label>Label</Field.Label>
      <Field.Input />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Field } from '@ark-ui/vue/field'
</script>

<template>
  <Field.Root>
    <Field.Label>Label</Field.Label>
    <Field.Input />
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Field } from '@ark-ui/svelte/field'
</script>

<Field.Root>
  <Field.Label>Label</Field.Label>
  <Field.Input />
  <Field.HelperText>Some additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

```

### Textarea

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

**Example: textarea**

#### React

```tsx
import { Field } from '@ark-ui/react/field'

export const Textarea = () => {
  return (
    <Field.Root>
      <Field.Label>Label</Field.Label>
      <Field.Textarea />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

```

#### Solid

```tsx
import { Field } from '@ark-ui/solid/field'

export const Textarea = () => {
  return (
    <Field.Root>
      <Field.Label>Label</Field.Label>
      <Field.Textarea />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Field } from '@ark-ui/vue/field'
</script>

<template>
  <Field.Root>
    <Field.Label>Label</Field.Label>
    <Field.Textarea />
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Field } from '@ark-ui/svelte/field'
</script>

<Field.Root>
  <Field.Label>Message</Field.Label>
  <Field.Textarea placeholder="Enter your message..." />
  <Field.HelperText>Please provide as much detail as possible</Field.HelperText>
</Field.Root>

```

### Textarea Autoresize

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

**Example: textarea-autoresize**

#### React

```tsx
import { Field } from '@ark-ui/react/field'

export const TextareaAutoresize = () => {
  return (
    <Field.Root>
      <Field.Label>Label</Field.Label>
      <Field.Textarea autoresize />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

```

#### Solid

```tsx
import { Field } from '@ark-ui/solid/field'

export const TextareaAutoresize = () => {
  return (
    <Field.Root>
      <Field.Label>Label</Field.Label>
      <Field.Textarea autoresize />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Field } from '@ark-ui/vue/field'
</script>

<template>
  <Field.Root>
    <Field.Label>Label</Field.Label>
    <Field.Textarea autoresize />
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Field } from '@ark-ui/svelte/field'
</script>

<Field.Root>
  <Field.Label>Message</Field.Label>
  <Field.Textarea placeholder="Enter your message..." autoresize />
  <Field.HelperText>Please provide as much detail as possible</Field.HelperText>
</Field.Root>

```

### Select

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

**Example: select**

#### React

```tsx
import { Field } from '@ark-ui/react/field'

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

```

#### Solid

```tsx
import { Field } from '@ark-ui/solid/field'

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

```

#### Vue

```vue
<script setup lang="ts">
import { Field } from '@ark-ui/vue/field'
</script>

<template>
  <Field.Root>
    <Field.Label>Label</Field.Label>
    <Field.Select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </Field.Select>
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Field } from '@ark-ui/svelte/field'
</script>

<Field.Root>
  <Field.Label>Country</Field.Label>
  <Field.Select>
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
    <option value="de">Germany</option>
  </Field.Select>
  <Field.HelperText>Please select your country of residence</Field.HelperText>
</Field.Root>

```

### Checkbox

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

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

### Root Provider

Use the `useField` hook to create the field store and pass it to the `Field.RootProvider` component. This allows you to
have maximum control over the field programmatically.

**Example: root-provider**

#### React

```tsx
import { Field, useField } from '@ark-ui/react/field'
import { useState } from 'react'

export const RootProvider = () => {
  const [invalid, setInvalid] = useState(false)
  const value = useField({
    invalid,
  })

  return (
    <>
      <button onClick={() => setInvalid((prev) => !prev)}>Toggle Invalid</button>
      <Field.RootProvider value={value}>
        <Field.Label>Label</Field.Label>
        <Field.Input />
        <Field.HelperText>Some additional Info</Field.HelperText>
        <Field.ErrorText>Error Info</Field.ErrorText>
      </Field.RootProvider>
    </>
  )
}

```

#### Solid

```tsx
import { Field, useField } from '@ark-ui/solid/field'
import { createMemo, createSignal } from 'solid-js'

export const RootProvider = () => {
  const [invalid, setInvalid] = createSignal(false)
  const fieldProps = createMemo(() => ({
    invalid: invalid(),
  }))
  const value = useField(fieldProps)

  return (
    <>
      <button onClick={() => setInvalid((prev) => !prev)}>Toggle Invalid</button>
      <Field.RootProvider value={value}>
        <Field.Label>Label</Field.Label>
        <Field.Input />
        <Field.HelperText>Some additional Info</Field.HelperText>
        <Field.ErrorText>Error Info</Field.ErrorText>
      </Field.RootProvider>
    </>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Field, type UseFieldProps, useField } from '@ark-ui/vue/field'
import { computed, ref } from 'vue'

const invalid = ref(false)
const fieldProps = computed<UseFieldProps>(() => ({
  invalid: invalid.value,
}))

const field = useField(fieldProps)
</script>

<template>
  <button @click="invalid = !invalid">Toggle Invalid</button>

  <Field.RootProvider :value="field">
    <Field.Label>Label</Field.Label>
    <Field.Input />
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.RootProvider>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Field, useField } from '@ark-ui/svelte/field'

  const id = $props.id()

  const field = useField({ id, invalid: true, required: true })
</script>

<Field.RootProvider value={field}>
  <Field.Label>
    Label
    <Field.RequiredIndicator>*</Field.RequiredIndicator>
  </Field.Label>
  <Field.Input />
  <Field.ErrorText>This field has an error</Field.ErrorText>
</Field.RootProvider>

<Field.Context>
  {#snippet render(field)}
    <p>Field ID: {field().ids.control}</p>
    <p>Required: {field().required}</p>
    <p>Invalid: {field().invalid}</p>
  {/snippet}
</Field.Context>

```

> If you're using the `Field.RootProvider` component, you don't need to use the `Field.Root` 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.

**Example: custom-control**

#### React

```tsx
import { Field } from '@ark-ui/react/field'

export const CustomControl = () => {
  return (
    <Field.Root invalid>
      <Field.Label>Any Control</Field.Label>
      <Field.Context>{(field) => <input {...field.getInputProps()} />}</Field.Context>
      <Field.HelperText>Uses getControlProps() for maximum flexibility</Field.HelperText>
      <Field.ErrorText>This field has an error</Field.ErrorText>
    </Field.Root>
  )
}

```

#### Solid

```tsx
import { Field } from '@ark-ui/solid/field'

export const CustomControl = () => {
  return (
    <Field.Root invalid>
      <Field.Label>Any Control</Field.Label>
      <Field.Context>{(field) => <input {...field().getInputProps()} />}</Field.Context>
      <Field.HelperText>Uses getControlProps() for maximum flexibility</Field.HelperText>
      <Field.ErrorText>This field has an error</Field.ErrorText>
    </Field.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Field } from '@ark-ui/vue/field'
</script>

<template>
  <Field.Root invalid>
    <Field.Label>Any Control</Field.Label>
    <Field.Context v-slot="field">
      <input v-bind="field.getInputProps()" />
    </Field.Context>
    <Field.HelperText>Uses getControlProps() for maximum flexibility</Field.HelperText>
    <Field.ErrorText>This field has an error</Field.ErrorText>
  </Field.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Field } from '@ark-ui/svelte/field'
</script>

<Field.Root invalid>
  <Field.Label>Any Control</Field.Label>
  <Field.Context>
    {#snippet render(field)}
      <input {...field().getInputProps()} />
    {/snippet}
  </Field.Context>
  <Field.HelperText>Uses getControlProps() for maximum flexibility</Field.HelperText>
  <Field.ErrorText>This field has an error</Field.ErrorText>
</Field.Root>

```

## API Reference

**Component API Reference**

#### React

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


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


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | 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. |


**ErrorText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**HelperText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RequiredIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `fallback` | `number | boolean | Node | (string & {}) | ArrayElement` | No |  |


**RootProvider Props:**

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


**Select Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'select'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Textarea Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'textarea'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoresize` | `boolean` | No | Whether the textarea should autoresize |


#### Vue

**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. |
| `id` | `string` | No | The id of the field. |
| `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. |


**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. |
| `modelValue` | `any` | No |  |


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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `{ ariaDescribedby: string | undefined; ids: { control: string; label: string; errorText: string; helperText: string; }; refs: { rootRef: Ref<null, null>; }; disabled: boolean | undefined; ... 10 more ...; getRequiredIndicatorProps: () => HTMLAttributes; }` | 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. |
| `modelValue` | `any` | No |  |


**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 |
| `modelValue` | `string | number | readonly string[]` | No |  |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | 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. |
| `id` | `string` | No | The id of the field. |
| `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. |
| `ref` | `Element` | No |  |
| `required` | `boolean` | No | Indicates whether the field is required. |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[() => { setRootRef: (el: Element | null) => void; ariaDescribedby: string | undefined; ids: { root: string; control: string; label: string; errorText: string; helperText: string; }; ... 11 more ...; getRequiredIndicatorProps: () => HTMLAttributes<...>; }]>` | Yes |  |


**ErrorText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**HelperText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**RequiredIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `fallback` | `Snippet<[]>` | No |  |
| `ref` | `Element` | No |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `() => { setRootRef: (el: Element | null) => void; ariaDescribedby: string | undefined; ids: { root: string; control: string; label: string; errorText: string; helperText: string; }; ... 11 more ...; getRequiredIndicatorProps: () => HTMLAttributes<...>; }` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Select Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'select'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Textarea Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'textarea'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoresize` | `boolean` | No | Whether the textarea should autoresize |
| `ref` | `Element` | No |  |