React Fieldset component

Preview

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

Usage

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)

Implementation notes

Every Fieldset gets a Fieldset.Legend
disabled on the Fieldset locks every control inside it
Put a Grid inside for multi-column layouts
Fieldset.Legend forwards DOM props for ids, ARIA, and data hooks

Installation

pnpm add @usefragments/ui

The npm package stays managed by your package manager. Import styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.

Anatomy

Import Fieldset once, then compose its parts with 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" minRows={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 reference

Component props
Prop	Type	Default	Description
`children`Required	`React.ReactNode`	Not set	Fieldset content including Fieldset.Legend and form fields
`Description.children`Required	`React.ReactNode`	Not set	—
`disabled`	`boolean \| undefined`	Not set	Disables all fields within the fieldset
`Legend.children`Required	`React.ReactNode`	Not set	—

Accessibility

Renders a real fieldset element
Legend names the group
Fieldset.Description describes the group through aria-describedby
Disabled cascades to every child field

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

Next steps

Accessibility guidanceThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.