FairGarden Design

Fieldset

Groups controls that answer one question, such as an address or a contact preference, and every checkbox or radio group. A native fieldset on Base UI's Fieldset, with its legend first.

import {
  Fieldset,
  FieldsetLeader,
  FieldsetLegend,
} from '@fairgarden-private/design/components/Fieldset'

The legend is authored in title case up to about four words. disabled disables the legend and every control inside it; hiding the group is usually better. Don't nest framed fieldsets, and don't frame ordinary forms: the frame is for technical or printable panels.

Variants and states

Variants and states

text (default) is open: the legend over a hairline rule. outline is the framed panel, the legend set into its --ds-stroke-3 top edge. ledger is the dotted frame for self-contained order and checklist forms: lay each row out inline and put a FieldsetLeader between the label and the control.

Contact
Water Calculator
 h
Print Order
Shipping Address
FieldsetVariants.tsx
import { Field, FieldLabel } from '@fairgarden-private/design/components/Field'
import {
  Fieldset,
  FieldsetLeader,
  FieldsetLegend,
} from '@fairgarden-private/design/components/Fieldset'
import { Input } from '@fairgarden-private/design/components/Input'
import { NumberField } from '@fairgarden-private/design/components/NumberField'
import styles from './variants.module.css'

/** Open (default), framed and ledger fieldsets, and a disabled group. */
export function FieldsetVariants() {
  return (
    <div className={styles.stack}>
      <Fieldset>
        <FieldsetLegend>Contact</FieldsetLegend>
        <Field>
          <FieldLabel>Email Address</FieldLabel>
          <Input type="email" />
        </Field>
        <Field>
          <FieldLabel optional>Phone Number</FieldLabel>
          <Input type="tel" />
        </Field>
      </Fieldset>
      <Fieldset variant="outline">
        <FieldsetLegend>Water Calculator</FieldsetLegend>
        <Field>
          <FieldLabel>Hiking Hours</FieldLabel>
          <NumberField min={1} max={12} defaultValue={4} suffix="h" />
        </Field>
      </Fieldset>
      <Fieldset variant="ledger">
        <FieldsetLegend>Print Order</FieldsetLegend>
        <Field className={styles.ledgerRow}>
          <FieldLabel>Heron Print</FieldLabel>
          <FieldsetLeader />
          <Input defaultValue="1" style={{ inlineSize: '8ch' }} />
        </Field>
        <Field className={styles.ledgerRow}>
          <FieldLabel>Egret Print</FieldLabel>
          <FieldsetLeader />
          <Input defaultValue="0" style={{ inlineSize: '8ch' }} />
        </Field>
      </Fieldset>
      <Fieldset disabled>
        <FieldsetLegend>Shipping Address</FieldsetLegend>
        <Field>
          <FieldLabel>Street</FieldLabel>
          <Input defaultValue="12 Marsh Lane" />
        </Field>
      </Fieldset>
    </div>
  )
}

Primary scale

Primary scale

Structure takes primary only; secondary is accepted and unused.

Primary Plum
Primary Indigo
FieldsetColor.tsx
import { Field, FieldLabel } from '@fairgarden-private/design/components/Field'
import { Fieldset, FieldsetLegend } from '@fairgarden-private/design/components/Fieldset'
import { Input } from '@fairgarden-private/design/components/Input'
import styles from './color.module.css'

/** Structure takes `primary` only: legend, frame and rules. */
export function FieldsetColor() {
  return (
    <div className={styles.stack}>
      <Fieldset primary="plum">
        <FieldsetLegend>Primary Plum</FieldsetLegend>
        <Field>
          <FieldLabel>City</FieldLabel>
          <Input />
        </Field>
      </Fieldset>
      <Fieldset variant="outline" primary="indigo">
        <FieldsetLegend>Primary Indigo</FieldsetLegend>
        <Field>
          <FieldLabel>Region</FieldLabel>
          <Input />
        </Field>
      </Fieldset>
    </div>
  )
}

On grounds

On paper and forest

The hairline, frame and field roles resolve per ground.

paper

Contact
Calculator
km

forest

Contact
Calculator
km
FieldsetGrounds.tsx
import { Field, FieldLabel } from '@fairgarden-private/design/components/Field'
import { Fieldset, FieldsetLegend } from '@fairgarden-private/design/components/Fieldset'
import { PresetGround } from '@/components/PresetGround'
import { Input } from '@fairgarden-private/design/components/Input'
import styles from './grounds.module.css'

const presets = ['paper', 'forest'] as const

/** Open and framed fieldsets on paper and forest. */
export function FieldsetGrounds() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround key={preset} preset={preset} className={styles.face}>
          <p className={styles.name}>{preset}</p>
          <Fieldset>
            <FieldsetLegend>Contact</FieldsetLegend>
            <Field>
              <FieldLabel>Email Address</FieldLabel>
              <Input type="email" />
            </Field>
          </Fieldset>
          <Fieldset variant="outline">
            <FieldsetLegend>Calculator</FieldsetLegend>
            <Field>
              <FieldLabel>Distance</FieldLabel>
              <Input suffix="km" />
            </Field>
          </Fieldset>
        </PresetGround>
      ))}
    </div>
  )
}

API Reference

Fieldset

A Base UI Fieldset: a native fieldset whose first child is a FieldsetLegend. disabled disables the legend and every control in it; hiding the group is usually better.

PropTypeDescription
primary
| 'olive'
| 'sage'
| 'slate'
| 'sand'
| 'gray'
| 'mauve'
| 'brown'
| 'bronze'
| 'gold'
| 'red'
| 'ruby'
| 'crimson'
| 'tomato'
| 'pink'
| 'plum'
| 'indigo'
| 'iris'
| 'violet'
| 'purple'
| null
| undefined

Primary Radix scale: legend, frame and rules. Never defaulted [D133].

secondary
| 'olive'
| 'sage'
| 'slate'
| 'sand'
| 'gray'
| 'mauve'
| 'brown'
| 'bronze'
| 'gold'
| 'red'
| 'ruby'
| 'crimson'
| 'tomato'
| 'pink'
| 'plum'
| 'indigo'
| 'iris'
| 'violet'
| 'purple'
| 'amber'
| 'blue'
| 'cyan'
| 'grass'
| 'green'
| 'jade'
| 'lime'
| 'mint'
| 'orange'
| 'sky'
| 'teal'
| 'yellow'
| null
| undefined

Secondary Radix scale: accepted, unused (structure is primary only).

variant
'text' | 'outline' | 'ledger' | null | undefined

text (default) is open: a legend over a hairline rule. outline is the framed panel for technical forms and calculators; never nest two. ledger is the dotted frame for self-contained order and checklist forms, with FieldsetLeader rows.

FieldsetLegend and FieldsetLeader

The legend, a native legend: type-field-label in --primary12, title case up to about four words, sentence case for longer or question legends [D160]. Open fieldsets draw the hairline rule under it; framed fieldsets set it into the top edge.

The ledger’s line-dotted-fine leader in --role-rule, running from a row’s label to its control (Inciardi Prints). Place it between the two in a row that lays out inline; it grows to fill the space. Decorative.

Additional types

fieldset
FieldsetLeaderProps

Props for FieldsetLeader: SVG props without children.

type FieldsetLeaderProps = Omit<React.SVGProps<SVGSVGElement>, 'children'>
FieldsetLegendProps

Props for FieldsetLegend: Base UI Fieldset.Legend props.

type FieldsetLegendProps = FieldsetLegend.FieldsetLegendProps
FieldsetProps

Props for Fieldset: Base UI Fieldset.Root props plus the variant and color axes.

type FieldsetProps = FieldsetRootProps & {
  variant?: 'text' | 'outline' | 'ledger' | null;
  primary?:
    | 'olive'
    | 'sage'
    | 'slate'
    | 'sand'
    | 'gray'
    | 'mauve'
    | 'brown'
    | 'bronze'
    | 'gold'
    | 'red'
    | 'ruby'
    | 'crimson'
    | 'tomato'
    | 'pink'
    | 'plum'
    | 'indigo'
    | 'iris'
    | 'violet'
    | 'purple'
    | null;
  secondary?:
    | 'olive'
    | 'sage'
    | 'slate'
    | 'sand'
    | 'gray'
    | 'mauve'
    | 'brown'
    | 'bronze'
    | 'gold'
    | 'red'
    | 'ruby'
    | 'crimson'
    | 'tomato'
    | 'pink'
    | 'plum'
    | 'indigo'
    | 'iris'
    | 'violet'
    | 'purple'
    | 'amber'
    | 'blue'
    | 'cyan'
    | 'grass'
    | 'green'
    | 'jade'
    | 'lime'
    | 'mint'
    | 'orange'
    | 'sky'
    | 'teal'
    | 'yellow'
    | null;
}

Specification: DESIGN-SYSTEM.md §10.2 (field, fieldset and form).