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

---

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

Learn how to use the `Fieldset` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Field

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

<Example id="with-field" />

### Checkbox

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

<Example id="with-checkbox" />

### Root Provider

The `RootProvider` component provides a context for the fieldset. It accepts the value of the `useFieldset` hook. You
can leverage it to access the component state and methods from outside the fieldset.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

### 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 id="phone-input" />

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