Skip to main content

Fieldset

Groups related form controls under an accessible legend.

import { Fieldset } from "@/fragments/ui";Source

Preview

<Fieldset>
  <Fieldset.Legend>Personal Information</Fieldset.Legend>
  <Grid columns={2} gap="md">
    <Field name="firstName">
      <Field.Label>First Name</Field.Label>
      <Field.Control>

Installation

npx @usefragments/cli add fieldset

Writes src/fragments/ui/components/Fieldset plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Anatomy

Fieldset is a compound: import the root and reach its parts through dot notation.

  • Fieldset.Legend
  • Fieldset.Description

A Grid inside the legend box pairs short fields on one row.

<Fieldset>
  <Fieldset.Legend>Personal Information</Fieldset.Legend>
  <Grid columns={2} gap="md">
    <Field name="firstName">
      <Field.Label>First Name</Field.Label>
      <Field.Control>
        <Input placeholder="Jane" />
      </Field.Control>
    </Field>
    <Field name="lastName">
      <Field.Label>Last Name</Field.Label>
      <Field.Control>
        <Input placeholder="Doe" />
      </Field.Control>
    </Field>
    <Grid.Item colSpan="full">
      <Field name="email">
        <Field.Label>Email</Field.Label>

Examples

Mixed controls

Textarea, select and checkbox share one spacing rhythm.

<Fieldset>
  <Fieldset.Legend>Preferences</Fieldset.Legend>
  <Field name="bio">
    <Field.Label>Bio</Field.Label>
    <Field.Control>
      <Textarea placeholder="Tell us about yourself" rows={3} />

With Description

One sentence under the legend covers the whole group.

<Fieldset>
  <Fieldset.Legend>Notification Settings</Fieldset.Legend>
  <Fieldset.Description>Choose how you want to be notified about updates.</Fieldset.Description>
  <Field name="emailNotif">
    <Field.Control>
      <Checkbox label="Email notifications" />

Disabled

One prop on the wrapper dims and locks every control inside.

<Fieldset disabled>
  <Fieldset.Legend>Locked Section</Fieldset.Legend>
  <Grid columns={2} gap="md">
    <Field name="lockedFirst">
      <Field.Label>First Name</Field.Label>
      <Field.Control>

API

Component props
Prop
Type
Default
Description
childrenRequirednodeNot setFieldset content including Fieldset.Legend and form fields
disabledbooleanNot setDisables all fields within the fieldset

Accessibility

  • Renders a real fieldset element
  • Legend names the group
  • Disabled cascades to every child field

Guidance

Use when

  • Fields that belong to one subject: address, billing, profile
  • Locking a whole section at once
  • Screen readers should hear the group name before each field

Avoid when

  • Grouping for looks alone (use Card)
  • Wrapping one control (use Field)

Related

  • FieldsiblingContains Field components
  • FormparentUsed within a Form
  • CardalternativeUse Card for non-form visual grouping

Next steps