Skip to main content
This component is returned by useForm().
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 />.