> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Fieldset />

> A fieldset component that groups related form inputs together with a legend.

export const ExperimentalWarning = ({api}) => <Note>
    The <code>{api}</code> API is experimental and may change in the future. It has been marked as{" "}
    <code>@deprecated</code> to remind the developer that it is experimental.{" "}
    <strong>
      It is <em>not</em> "deprecated", just experimental.
    </strong>{" "}
    Please don't use it in production versions of your app. We do not guarantee backward
    compatibility, or that the API will remain stable.
  </Note>;

<img className="dark:hidden" width="720" height="440" noZoom src="https://mintcdn.com/attio/MtV7U9CRhT0ouJbz/images/radio-group.png?fit=max&auto=format&n=MtV7U9CRhT0ouJbz&q=85&s=06a9447b217bcf4bf568899d1c61a84b" data-path="images/radio-group.png" />

<img className="hidden dark:block" width="720" height="440" noZoom src="https://mintcdn.com/attio/MtV7U9CRhT0ouJbz/images/radio-group-dark.png?fit=max&auto=format&n=MtV7U9CRhT0ouJbz&q=85&s=d8c27158ee560f199d605c9b5af5ee24" data-path="images/radio-group-dark.png" />

<Note>This component is returned by [`useForm()`](../../forms/use-form).</Note>

<ExperimentalWarning api="Fieldset" />

A `<Fieldset />` groups related form inputs together under a descriptive legend. It can contain either:

* A single `<RadioGroup />`
* Multiple `<Checkbox />` inputs

<Note>
  When checkboxes are wrapped in a `<Fieldset />`, their labels are rendered on the right side of the checkbox instead of above it.
</Note>

<Warning>
  A `<Fieldset />` should contain either a single `<RadioGroup />` or multiple `<Checkbox />`
  inputs, but not mixed.
</Warning>

## Example with RadioGroup

```tsx fieldset-radio-dialog.tsx theme={"system"}
import React from "react"
import {Forms, useForm, showToast} from "attio/client"

export function FieldsetRadioDialog() {
  const {Form, SubmitButton, Fieldset, RadioGroup} = useForm(
    {
      priority: Forms.string(),
    },
    {
      priority: "medium",
    },
  )
  return (
    <Form
      onSubmit={async (values) => {
        await showToast({
          title: "Form submitted",
          variant: "success",
          text: `Selected priority: ${values.priority}`,
        })
      }}
    >
      <Fieldset legend="Priority">
        <RadioGroup name="priority">
          <RadioGroup.Item value="low" label="Low" />
          <RadioGroup.Item value="medium" label="Medium" />
          <RadioGroup.Item value="high" label="High" />
        </RadioGroup>
      </Fieldset>
      <SubmitButton label="Submit" />
    </Form>
  )
}
```

## Example with Checkboxes

```tsx fieldset-checkbox-dialog.tsx theme={"system"}
import React from "react"
import {Forms, useForm, showToast} from "attio/client"

export function FieldsetCheckboxDialog() {
  const {Form, SubmitButton, Fieldset, Checkbox} = useForm(
    {
      emailNotifications: Forms.boolean(),
      smsNotifications: Forms.boolean(),
      pushNotifications: Forms.boolean(),
    },
    {
      emailNotifications: true,
      smsNotifications: false,
      pushNotifications: true,
    },
  )
  return (
    <Form
      onSubmit={async (values) => {
        await showToast({
          title: "Form submitted",
          variant: "success",
          text: JSON.stringify(values),
        })
      }}
    >
      <Fieldset legend="Notification preferences">
        <Checkbox label="Email" name="emailNotifications" />
        <Checkbox label="SMS" name="smsNotifications" />
        <Checkbox label="Push notifications" name="pushNotifications" />
      </Fieldset>
      <SubmitButton label="Submit" />
    </Form>
  )
}
```

## Props

<ParamField path="legend" type="string" required>
  The legend text for the fieldset, which acts as a label for the group of inputs.
</ParamField>

<ParamField path="children" type="React.ReactNode" required>
  Either a single `<RadioGroup />` or multiple `<Checkbox />` inputs.

  <Warning>
    Do not mix `<RadioGroup />` and `<Checkbox />` components within the same `<Fieldset />`.
  </Warning>
</ParamField>