# Fieldset

URL: https://ark-ui.com/docs/components/fieldset
LLM: https://ark-ui.com/llms.txt/components/fieldset

A set of form controls optionally grouped under a common name.

---

## Anatomy



```tsx
<Fieldset.Root>
  <Fieldset.Legend />
  <Fieldset.HelperText />
  <Fieldset.ErrorText />
</Fieldset.Root>
```

## Examples

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

### Basic

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

export const Basic = () => {
  return (
    <Fieldset.Root className={styles.Root}>
      <Fieldset.Legend className={styles.Legend}>Contact Details</Fieldset.Legend>

      <Field.Root className={field.Root}>
        <Field.Label className={field.Label}>Name</Field.Label>
        <Field.Input className={field.Input} placeholder="John Doe" />
      </Field.Root>

      <Field.Root className={field.Root}>
        <Field.Label className={field.Label}>Email</Field.Label>
        <Field.Input className={field.Input} type="email" placeholder="john@example.com" />
      </Field.Root>
    </Fieldset.Root>
  )
}
```

### Field

This example demonstrates how to use the `Field` component with a standard input field within a `Fieldset`.

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

export const WithField = () => {
  return (
    <Fieldset.Root className={styles.Root}>
      <Fieldset.Legend className={styles.Legend}>Personal Information</Fieldset.Legend>

      <Field.Root className={field.Root}>
        <Field.Label className={field.Label}>First Name</Field.Label>
        <Field.Input className={field.Input} placeholder="Enter your first name" />
        <Field.HelperText className={field.HelperText}>As it appears on your ID</Field.HelperText>
      </Field.Root>

      <Field.Root className={field.Root}>
        <Field.Label className={field.Label}>Last Name</Field.Label>
        <Field.Input className={field.Input} placeholder="Enter your last name" />
      </Field.Root>
    </Fieldset.Root>
  )
}
```

### Checkbox

This example shows how to use the `Fieldset` component with other Ark UI form elements like `Checkbox`.

```tsx
import { Checkbox } from '@ark-ui/react/checkbox'
import { Fieldset } from '@ark-ui/react/fieldset'
import { CheckIcon } from 'lucide-react'
import checkbox from 'styles/checkbox.module.css'
import styles from 'styles/fieldset.module.css'

export const WithCheckbox = () => {
  return (
    <Fieldset.Root className={styles.Root}>
      <Fieldset.Legend className={styles.Legend}>Email Preferences</Fieldset.Legend>

      <Checkbox.Root className={checkbox.Root} defaultChecked>
        <Checkbox.Control className={checkbox.Control}>
          <Checkbox.Indicator className={checkbox.Indicator}>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.Label className={checkbox.Label}>Product updates</Checkbox.Label>
        <Checkbox.HiddenInput />
      </Checkbox.Root>

      <Checkbox.Root className={checkbox.Root}>
        <Checkbox.Control className={checkbox.Control}>
          <Checkbox.Indicator className={checkbox.Indicator}>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.Label className={checkbox.Label}>Marketing emails</Checkbox.Label>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
    </Fieldset.Root>
  )
}
```

### Root Provider

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

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

export const RootProvider = () => {
  const fieldset = useFieldset()

  return (
    <Fieldset.RootProvider className={styles.Root} value={fieldset}>
      <Fieldset.Legend className={styles.Legend}>Contact Details</Fieldset.Legend>

      <Field.Root className={field.Root}>
        <Field.Label className={field.Label}>Name</Field.Label>
        <Field.Input className={field.Input} placeholder="John Doe" />
      </Field.Root>

      <Field.Root className={field.Root}>
        <Field.Label className={field.Label}>Email</Field.Label>
        <Field.Input className={field.Input} type="email" placeholder="john@example.com" />
      </Field.Root>
    </Fieldset.RootProvider>
  )
}
```

### Input with Select

This example shows how to use the `Fieldset` component with `Field.Input` and `Select` to create a interactive phone
input component.

```tsx
import { Field } from '@ark-ui/react/field'
import { Fieldset } from '@ark-ui/react/fieldset'
import { Portal } from '@ark-ui/react/portal'
import { Select, createListCollection } from '@ark-ui/react/select'
import { ChevronsUpDownIcon } from 'lucide-react'
import { useRef } from 'react'
import field from 'styles/field.module.css'
import styles from 'styles/fieldset.module.css'
import select from 'styles/select.module.css'

export const PhoneInput = () => {
  const extensions = createListCollection({
    items: [
      { label: '+1', value: '+1' },
      { label: '+44', value: '+44' },
      { label: '+49', value: '+49' },
      { label: '+41', value: '+41' },
    ],
  })

  const inputRef = useRef<HTMLInputElement | null>(null)
  const focusInput = () => {
    setTimeout(() => {
      inputRef.current?.focus()
    })
  }

  return (
    <Fieldset.Root className={styles.Root}>
      <Fieldset.Legend className={styles.Legend} onClick={focusInput}>
        Mobile Number
      </Fieldset.Legend>

      <div style={{ display: 'flex', alignItems: 'flex-start', gap: '0.5rem' }}>
        <Field.Root>
          <Select.Root className={select.Root} collection={extensions} defaultValue={['+1']} onValueChange={focusInput}>
            <Select.Control className={select.Control}>
              <Select.Trigger className={select.Trigger}>
                <Select.ValueText placeholder="Select" />
                <ChevronsUpDownIcon />
              </Select.Trigger>
            </Select.Control>
            <Portal>
              <Select.Positioner>
                <Select.Content className={select.Content}>
                  {extensions.items.map((item) => (
                    <Select.Item className={select.Item} key={item.value} item={item}>
                      <Select.ItemText className={select.ItemText}>{item.label}</Select.ItemText>
                    </Select.Item>
                  ))}
                </Select.Content>
              </Select.Positioner>
            </Portal>
            <Select.HiddenSelect />
          </Select.Root>
        </Field.Root>

        <Field.Root className={field.Root}>
          <Field.Input className={field.Input} ref={inputRef} />
        </Field.Root>
      </div>
    </Fieldset.Root>
  )
}
```

## API Reference

### Root

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Indicates whether the fieldset is invalid.

### ErrorText

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### HelperText

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Legend

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### RootProvider

#### Props

**`value`**
Type: `{ refs: { rootRef: RefObject<HTMLFieldSetElement | null>; }; ids: { legend: string; errorText: string; helperText: string; }; disabled: boolean; invalid: boolean; getRootProps: () => Omit<...>; getLegendProps: () => Omit<...>; getHelperTextProps: () => Omit<...>; getErrorTextProps: () => Omit<...>; }`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.