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

#### React

```tsx
import { Field } from '@ark-ui/react/field'
import styles from 'styles/field.module.css'

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

```

#### Solid

```tsx
import { Field } from '@ark-ui/solid/field'
import styles from 'styles/field.module.css'

export const 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>
)

```

#### Vue

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

<template>
  <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>
</template>

```

#### Svelte

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

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

#### React

```tsx
import { Field } from '@ark-ui/react/field'
import styles from 'styles/field.module.css'

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

```

#### Solid

```tsx
import { Field } from '@ark-ui/solid/field'
import styles from 'styles/field.module.css'

export const 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>
)

```

#### Vue

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

<template>
  <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>
</template>

```

#### Svelte

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

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

#### React

```tsx
import { Field } from '@ark-ui/react/field'
import styles from 'styles/field.module.css'

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

```

#### Solid

```tsx
import { Field } from '@ark-ui/solid/field'
import styles from 'styles/field.module.css'

export const 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>
)

```

#### Vue

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

<template>
  <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>
</template>

```

#### Svelte

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

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

#### React

```tsx
import { Field } from '@ark-ui/react/field'
import styles from 'styles/field.module.css'

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

```

#### Solid

```tsx
import { Field } from '@ark-ui/solid/field'
import styles from 'styles/field.module.css'

export const 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>
)

```

#### Vue

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

<template>
  <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>
</template>

```

#### Svelte

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

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

#### React

```tsx
import { Field, useField } from '@ark-ui/react/field'
import { useState } from 'react'
import styles from 'styles/field.module.css'
import button from 'styles/button.module.css'

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

  return (
    <>
      <button className={button.Root} style={{ marginBottom: '1rem' }} onClick={() => setInvalid((prev) => !prev)}>
        Toggle Invalid
      </button>
      <Field.RootProvider className={styles.Root} value={field}>
        <Field.Label className={styles.Label}>Label</Field.Label>
        <Field.Input className={styles.Input} />
        <Field.HelperText className={styles.HelperText}>Some additional Info</Field.HelperText>
        <Field.ErrorText className={styles.ErrorText}>Error Info</Field.ErrorText>
      </Field.RootProvider>
    </>
  )
}

```

#### Solid

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

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

  return (
    <>
      <button class={button.Root} style={{ 'margin-bottom': '1rem' }} onClick={() => setInvalid((prev) => !prev)}>
        Toggle Invalid
      </button>
      <Field.RootProvider class={styles.Root} value={value}>
        <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>
    </>
  )
}

```

#### Vue

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

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

const field = useField(fieldProps)
</script>

<template>
  <button :class="button.Root" style="margin-bottom: 1rem" @click="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>
</template>

```

#### Svelte

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

  const id = $props.id()

  let invalid = $state(false)
  const field = useField({
    id,
    get invalid() {
      return invalid
    },
  })
</script>

<button class={button.Root} style="margin-bottom: 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>

```

### 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'
import styles from 'styles/field.module.css'

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

```

#### Solid

```tsx
import { Field } from '@ark-ui/solid/field'
import styles from 'styles/field.module.css'

export const CustomControl = () => (
  <Field.Root class={styles.Root} invalid>
    <Field.Label class={styles.Label}>Any Control</Field.Label>
    <Field.Context>{(field) => <input {...field().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>
)

```

#### Vue

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

<template>
  <Field.Root :class="styles.Root" invalid>
    <Field.Label :class="styles.Label">Any Control</Field.Label>
    <Field.Context v-slot="field">
      <input v-bind="field.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>
</template>

```

#### Svelte

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

<Field.Root class={styles.Root} invalid>
  <Field.Label class={styles.Label}>Any Control</Field.Label>
  <Field.Context>
    {#snippet render(field)}
      <input {...field?.()?.getInputProps()} />
    {/snippet}
  </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**

#### 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 | ArrayElement | (string & {})` | 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 |  |
