Components / Forms

Fieldset

Fieldset groups related fields under a shared legend. It renders a semantic <fieldset> — the legend names the group for everyone, including assistive technology.

Loading playground…

What it is

A <Box as="fieldset"> with a bordered surface and an optional legend. Fieldset groups Fields, not controls directly — each control inside still belongs to its own Field for the id wiring. Fieldset adds the outer grouping and the group name.

Install

Fieldset is exported from usemotif. No separate install.

example.tsx

import { Fieldset } from 'usemotif';

API

Fieldset

stable

function Fieldset(props: FieldsetProps): JSX.Element

legendReactNode

The group name. Rendered as a `<legend>` — omit it only when a visible heading elsewhere already names the group.

…BoxPropsOmit<BoxProps, "as">

Every Box prop except `as` — Fieldset always renders `<fieldset>`.

Accessibility

The <fieldset> / <legend> pair is the native grouping mechanism. A screen reader announces the legend when focus enters any control in the group, so a user always knows which set of fields they are filling in. This matters most for groups where the controls share meaning only collectively — a radio group, an address block, a date split across three inputs.

Supply a legend unless a visible heading immediately before the Fieldset already names the group. A <fieldset> with no legend gives the group a border but no name.

Examples

An address block:

example.tsx

<Fieldset legend="Shipping address">
<Field>
  <Label>Street</Label>
  <Input />
</Field>
<Field>
  <Label>City</Label>
  <Input />
</Field>
<Field>
  <Label>Postcode</Label>
  <Input />
</Field>
</Fieldset>