# Fieldset

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

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

---

## Anatomy

<Anatomy id="fieldset" />

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

**Example: basic**

#### React

```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>
  )
}

```

#### Solid

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

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

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

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

```

#### Vue

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

<template>
  <Fieldset.Root :class="styles.Root">
    <Fieldset.Legend :class="styles.Legend">Contact Details</Fieldset.Legend>

    <Field.Root :class="field.Root">
      <Field.Label :class="field.Label">Name</Field.Label>
      <Field.Input :class="field.Input" placeholder="John Doe" />
    </Field.Root>

    <Field.Root :class="field.Root">
      <Field.Label :class="field.Label">Email</Field.Label>
      <Field.Input :class="field.Input" type="email" placeholder="john@example.com" />
    </Field.Root>
  </Fieldset.Root>
</template>

```

#### Svelte

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

<Fieldset.Root class={styles.Root}>
  <Fieldset.Legend class={styles.Legend}>Contact Details</Fieldset.Legend>

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

  <Field.Root class={field.Root}>
    <Field.Label class={field.Label}>Email</Field.Label>
    <Field.Input class={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`.

**Example: with-field**

#### React

```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>
  )
}

```

#### Solid

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

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

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

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

```

#### Vue

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

<template>
  <Fieldset.Root :class="styles.Root">
    <Fieldset.Legend :class="styles.Legend">Personal Information</Fieldset.Legend>

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

    <Field.Root :class="field.Root">
      <Field.Label :class="field.Label">Last Name</Field.Label>
      <Field.Input :class="field.Input" placeholder="Enter your last name" />
    </Field.Root>
  </Fieldset.Root>
</template>

```

#### Svelte

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

<Fieldset.Root class={styles.Root}>
  <Fieldset.Legend class={styles.Legend}>Personal Information</Fieldset.Legend>

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

  <Field.Root class={field.Root}>
    <Field.Label class={field.Label}>Last Name</Field.Label>
    <Field.Input class={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`.

**Example: with-checkbox**

#### React

```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>
  )
}

```

#### Solid

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

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

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { Checkbox } from '@ark-ui/vue/checkbox'
import { Fieldset } from '@ark-ui/vue/fieldset'
import { CheckIcon } from 'lucide-vue-next'
import checkbox from 'styles/checkbox.module.css'
import styles from 'styles/fieldset.module.css'
</script>

<template>
  <Fieldset.Root :class="styles.Root">
    <Fieldset.Legend :class="styles.Legend">Email Preferences</Fieldset.Legend>

    <Checkbox.Root :class="checkbox.Root" defaultChecked>
      <Checkbox.Control :class="checkbox.Control">
        <Checkbox.Indicator :class="checkbox.Indicator">
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label :class="checkbox.Label">Product updates</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>

    <Checkbox.Root :class="checkbox.Root">
      <Checkbox.Control :class="checkbox.Control">
        <Checkbox.Indicator :class="checkbox.Indicator">
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label :class="checkbox.Label">Marketing emails</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  </Fieldset.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Checkbox } from '@ark-ui/svelte/checkbox'
  import { Fieldset } from '@ark-ui/svelte/fieldset'
  import { CheckIcon } from 'lucide-svelte'
  import checkbox from 'styles/checkbox.module.css'
  import styles from 'styles/fieldset.module.css'
</script>

<Fieldset.Root class={styles.Root}>
  <Fieldset.Legend class={styles.Legend}>Email Preferences</Fieldset.Legend>

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

  <Checkbox.Root class={checkbox.Root}>
    <Checkbox.Control class={checkbox.Control}>
      <Checkbox.Indicator class={checkbox.Indicator}>
        <CheckIcon />
      </Checkbox.Indicator>
    </Checkbox.Control>
    <Checkbox.Label class={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.

**Example: root-provider**

#### React

```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>
  )
}

```

#### Solid

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

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

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

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

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

```

#### Vue

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

const fieldset = useFieldset()
</script>

<template>
  <Fieldset.RootProvider :class="styles.Root" :value="fieldset">
    <Fieldset.Legend :class="styles.Legend">Contact Details</Fieldset.Legend>

    <Field.Root :class="field.Root">
      <Field.Label :class="field.Label">Name</Field.Label>
      <Field.Input :class="field.Input" placeholder="John Doe" />
    </Field.Root>

    <Field.Root :class="field.Root">
      <Field.Label :class="field.Label">Email</Field.Label>
      <Field.Input :class="field.Input" type="email" placeholder="john@example.com" />
    </Field.Root>
  </Fieldset.RootProvider>
</template>

```

#### Svelte

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

  const fieldset = useFieldset()
</script>

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

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

  <Field.Root class={field.Root}>
    <Field.Label class={field.Label}>Email</Field.Label>
    <Field.Input class={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.

**Example: phone-input**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { Field } from '@ark-ui/solid/field'
import { Fieldset } from '@ark-ui/solid/fieldset'
import { Select, createListCollection } from '@ark-ui/solid/select'
import { ChevronsUpDownIcon } from 'lucide-solid'
import { Index, createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'
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, setInputRef] = createSignal<HTMLInputElement | null>(null)

  const focusInput = () => {
    setTimeout(() => {
      inputRef()?.focus()
    })
  }

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

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

        <Field.Root class={field.Root}>
          <Field.Input class={field.Input} ref={setInputRef} />
        </Field.Root>
      </div>
    </Fieldset.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Field } from '@ark-ui/vue/field'
import { Fieldset } from '@ark-ui/vue/fieldset'
import { Select, createListCollection } from '@ark-ui/vue/select'
import { ChevronsUpDownIcon } from 'lucide-vue-next'
import { ref } from 'vue'
import field from 'styles/field.module.css'
import styles from 'styles/fieldset.module.css'
import select from 'styles/select.module.css'

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

const inputRef = ref<{ $el: HTMLInputElement | null } | null>(null)

const focusInput = () => {
  setTimeout(() => {
    inputRef.value?.$el?.focus()
  })
}
</script>

<template>
  <Fieldset.Root :class="styles.Root">
    <Fieldset.Legend :class="styles.Legend" @click="focusInput">Mobile Number</Fieldset.Legend>
    <div style="display: flex; align-items: flex-start; gap: 0.5rem">
      <Field.Root>
        <Select.Root :class="select.Root" :collection="extensions" :default-value="['+1']" @value-change="focusInput">
          <Select.Control :class="select.Control">
            <Select.Trigger :class="select.Trigger">
              <Select.ValueText placeholder="Select" />
              <ChevronsUpDownIcon />
            </Select.Trigger>
          </Select.Control>

          <Select.Positioner>
            <Select.Content :class="select.Content">
              <Select.Item v-for="item in extensions.items" :key="item.value" :class="select.Item" :item="item">
                <Select.ItemText :class="select.ItemText">{{ item.label }}</Select.ItemText>
              </Select.Item>
            </Select.Content>
          </Select.Positioner>

          <Select.HiddenSelect />
        </Select.Root>
      </Field.Root>

      <Field.Root :class="field.Root">
        <Field.Input ref="inputRef" :class="field.Input" />
      </Field.Root>
    </div>
  </Fieldset.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Field } from '@ark-ui/svelte/field'
  import { Fieldset } from '@ark-ui/svelte/fieldset'
  import { Portal } from '@ark-ui/svelte/portal'
  import { Select, createListCollection } from '@ark-ui/svelte/select'
  import { ChevronsUpDownIcon } from 'lucide-svelte'
  import field from 'styles/field.module.css'
  import styles from 'styles/fieldset.module.css'
  import select from 'styles/select.module.css'

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

  let input: HTMLInputElement | null = null

  const focusInput = () => {
    setTimeout(() => {
      input?.focus()
    })
  }
</script>

<Fieldset.Root class={styles.Root}>
  <Fieldset.Legend class={styles.Legend} onclick={focusInput}>Mobile Number</Fieldset.Legend>

  <div style="display: flex; align-items: flex-start; gap: 0.5rem;">
    <Field.Root>
      <Select.Root class={select.Root} collection={extensions} defaultValue={['+1']} onValueChange={focusInput}>
        <Select.Control class={select.Control}>
          <Select.Trigger class={select.Trigger}>
            <Select.ValueText placeholder="Select" />
            <ChevronsUpDownIcon />
          </Select.Trigger>
        </Select.Control>
        <Portal>
          <Select.Positioner>
            <Select.Content class={select.Content}>
              {#each extensions.items as item}
                <Select.Item class={select.Item} {item}>
                  <Select.ItemText class={select.ItemText}>{item.label}</Select.ItemText>
                </Select.Item>
              {/each}
            </Select.Content>
          </Select.Positioner>
        </Portal>
        <Select.HiddenSelect />
      </Select.Root>
    </Field.Root>

    <Field.Root class={field.Root}>
      <Field.Input class={field.Input} bind:ref={input} />
    </Field.Root>
  </div>
</Fieldset.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. |
| `invalid` | `boolean` | No | Indicates whether the fieldset is invalid. |


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


**Legend 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` | `{ refs: { rootRef: RefObject<HTMLFieldSetElement | null>; }; disabled: boolean; invalid: boolean; getRootProps: () => Omit<DetailedHTMLProps<FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref">; getLegendProps: () => Omit<...>; getHelperTextProps: () => Omit<...>; getErrorTextProps: () => Omit<....` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Solid

**Root Props:**

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


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


**Legend Props:**

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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `Accessor<{ refs: { rootRef: HTMLFieldSetElement | undefined; }; disabled: boolean; invalid: boolean; getRootProps: () => { disabled: boolean; 'data-disabled': boolean | "true" | "false"; ... 4 more ...; "data-part": string; }; getLegendProps: () => { ...; }; getHelperTextProps: () => { ...; }; getErrorTextProps: () ...` | Yes |  |
| `asChild` | `(props: ParentProps<'fieldset'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### 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 | 'true' | 'false'` | No | Indicates whether the fieldset is disabled. |
| `id` | `string` | No | The id of the fieldset. |
| `invalid` | `boolean` | No | Indicates whether the fieldset is invalid. |


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


**Legend 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` | `{ refs: { rootRef: Ref<null, null>; }; disabled: boolean | "true" | "false" | undefined; invalid: boolean | undefined; getRootProps: () => FieldsetHTMLAttributes; getLegendProps: () => { ...; }; getHelperTextProps: () => { ...; }; getErrorTextProps: () => HTMLAttributes; }` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'fieldset'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Indicates whether the fieldset is disabled. |
| `id` | `string` | No | The id of the fieldset. |
| `invalid` | `boolean` | No | Indicates whether the fieldset is invalid. |
| `ref` | `Element` | No |  |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[() => { setRootRef: (el: Element | null) => void; disabled: boolean; invalid: boolean; getRootProps: () => HTMLFieldsetAttributes; getLegendProps: () => HTMLAttributes<...>; getHelperTextProps: () => HTMLAttributes<...>; getErrorTextProps: () => 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 |  |


**Legend Props:**

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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `() => { setRootRef: (el: Element | null) => void; disabled: boolean; invalid: boolean; getRootProps: () => HTMLFieldsetAttributes; getLegendProps: () => HTMLAttributes<...>; getHelperTextProps: () => HTMLAttributes<...>; getErrorTextProps: () => HTMLAttributes<...>; }` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'fieldset'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |