Skip to main content
This component is returned by useForm().
The Fieldset API is experimental and may change in the future. It has been marked as @deprecated to remind the developer that it is experimental. It is not "deprecated", just experimental. Please don't use it in production versions of your app. We do not guarantee backward compatibility, or that the API will remain stable.
A <Fieldset /> groups related form inputs together under a descriptive legend. It can contain either:
  • A single <RadioGroup />
  • Multiple <Checkbox /> inputs
When checkboxes are wrapped in a <Fieldset /> , their labels are rendered on the right side of the checkbox instead of above it.
A <Fieldset /> should contain either a single <RadioGroup /> or multiple <Checkbox /> inputs, but not mixed.

​
Example with RadioGroup

fieldset-radio-dialog.tsx
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

fieldset-checkbox-dialog.tsx
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

​
legend
string
required
The legend text for the fieldset, which acts as a label for the group of inputs.
​
children
React.ReactNode
required
Either a single <RadioGroup /> or multiple <Checkbox /> inputs.
Do not mix <RadioGroup /> and <Checkbox /> components within the same <Fieldset />.