Skip to content

Fieldset

Semantic grouping for related fields with a legend — settings sections and checkbox clusters.

Examples

Legend

Notifications

Overview

Fieldset maps to a native fieldset with FieldsetLegend. Compose with Field, Checkbox group, or Radio group inside.

tsx

import { Fieldset, FieldsetLegend } from "@standard-ui/react"

<Fieldset>
  <FieldsetLegend>Shipping</FieldsetLegend>
  {/* fields */}
</Fieldset>

API

PartRole
FieldsetGroups related controls.
FieldsetLegendVisible title for the group.

Guidelines

Do

  • Use a clear legend that names the section
  • Keep one concern per fieldset

Don't

  • Don't nest fieldsets deeply without need
  • Don't use a fieldset for a single unlabeled control