Fieldset

A fieldset component for grouping related form fields with optional title, subtitle, and grid layout.

Tap Room Reservation

Book a table at our craft beer tasting room
First Name
Last Name
Email Address
Phone
Date
Time
Party Size
Special Requests 
<Fieldset title="Tap Room Reservation" subtitle="Book a table at our craft beer tasting room" grid>
    <Field className="col-span-6">
        <FieldLabel>First Name</FieldLabel>
        <Input placeholder="John" required />
    </Field>
    <Field className="col-span-6">
        <FieldLabel>Last Name</FieldLabel>
        <Input placeholder="Brewer" required />
    </Field>
    <Field className="col-span-8">
        <FieldLabel>Email Address</FieldLabel>
        <Input type="email" placeholder="john@example.com" required />
    </Field>
    <Field className="col-span-4">
        <FieldLabel>Phone</FieldLabel>
        <Input type="tel" placeholder="(555) 123-4567" />
    </Field>
    <Field className="col-span-4">
        <FieldLabel>Date</FieldLabel>
        <Input type="date" required />
    </Field>
    <Field className="col-span-4">
        <FieldLabel>Time</FieldLabel>
        <Input type="time" required />
    </Field>
    <Field className="col-span-4">
        <FieldLabel>Party Size</FieldLabel>
        <Input type="number" placeholder="4" min="1" max="12" required />
    </Field>
    <Field className="col-span-full">
        <FieldLabel>Special Requests</FieldLabel>
        <Input placeholder="Beer preferences, dietary restrictions, etc." />
    </Field>
    <FieldsetButtons>
        <Button outline clr="blank" type="button">Cancel</Button>
        <Button type="submit" clr="primary">Reserve Table</Button>
    </FieldsetButtons>
</Fieldset>

Overview

The Fieldset component provides a semantic way to group related form fields together. It includes support for titles, subtitles, grid layouts, and button groups. Built on top of the Base UI Fieldset primitive.

Fieldset

Description

The root component that wraps a group of form fields. It automatically handles layout (flex or grid) and includes optional title and subtitle via the legend.

Basic Form

A simple form example.
Name
Email 
<Fieldset title="Basic Form" subtitle="A simple form example.">
    <Field>
        <FieldLabel>Name</FieldLabel>
        <Input />
    </Field>
    <Field>
        <FieldLabel>Email</FieldLabel>
        <Input type="email" />
    </Field>
</Fieldset>

Props

The Fieldset component accepts all props from the Base UI Fieldset.Root component, plus:

PropTypeDefaultDescription
titlestring-Title text for the fieldset legend
subtitlestring-Subtitle text displayed below the title
gridbooleanfalseUse grid layout instead of flex column
classNamestring-Additional CSS class names
childrenReactNode-Form fields and content

Grid Layout

Description

Use the grid prop to enable a 12-column grid layout for more complex forms. Fields can span multiple columns using Tailwind’s col-span-* utilities.

New Brew Details

Add a new craft beer to inventory.
Beer Name
ABV %
Style
Brewery
IBU
Price
Volume (oz) 
<Fieldset title="New Brew Details" subtitle="Add a new craft beer to inventory." grid>
    <Field className="col-span-8">
        <FieldLabel>Beer Name</FieldLabel>
        <Input placeholder="Hoppy IPA" />
    </Field>
    <Field className="col-span-4">
        <FieldLabel>ABV %</FieldLabel>
        <Input placeholder="6.5" />
    </Field>
    <Field className="col-span-6">
        <FieldLabel>Style</FieldLabel>
        <Input placeholder="IPA" />
    </Field>
    <Field className="col-span-6">
        <FieldLabel>Brewery</FieldLabel>
        <Input placeholder="Local Craft Co." />
    </Field>
    <Field className="col-span-4">
        <FieldLabel>IBU</FieldLabel>
        <Input placeholder="65" />
    </Field>
    <Field className="col-span-4">
        <FieldLabel>Price</FieldLabel>
        <Input placeholder="$8.99" />
    </Field>
    <Field className="col-span-4">
        <FieldLabel>Volume (oz)</FieldLabel>
        <Input placeholder="16" />
    </Field>
    <FieldsetButtons>
        <Button outline clr="blank" type="button">Cancel</Button>
        <Button type="submit" clr="primary">Add Beer</Button>
    </FieldsetButtons>
</Fieldset>

FieldsetLegend

Description

The legend component for a fieldset. Typically used via the title and subtitle props on Fieldset, but can be used directly for custom legend content.

Props

The FieldsetLegend component accepts all props from the Base UI Fieldset.Legend component, plus:

PropTypeDefaultDescription
titlestring-Title text for the legend
subtitlestring-Subtitle text displayed below the title
classNamestring-Additional CSS class names
childrenReactNode-Custom legend content

FieldsetButtons

Description

A container for action buttons at the bottom of a fieldset. Provides consistent spacing and alignment. Alignment options are available to control positioning of the buttons with right being the default.

Update Settings
Notification Email 
<Fieldset title="Update Settings">
    <Field>
        <FieldLabel>Notification Email</FieldLabel>
        <Input type="email" />
    </Field>
    <FieldsetButtons>
        <Button outline clr="blank" type="button">Cancel</Button>
        <Button clr="primary" type="submit">Save Changes</Button>
    </FieldsetButtons>
</Fieldset>

Props

PropTypeDefaultDescription
align”left” | “center” | “right""right”Alignment of the buttons
classNamestring-Additional CSS class names
childrenReactNode-Button components

Accessibility

The Fieldset component follows accessibility best practices:

  • Uses the semantic HTML <fieldset> element for proper grouping
  • Includes a <legend> element when title is provided for screen reader context
  • Maintains proper focus order within form fields
  • Grid layouts maintain logical tab order

When implementing fieldsets:

  1. Use descriptive titles that clearly identify the purpose of the field group
  2. Include subtitles to provide additional context when helpful
  3. Ensure logical tab order, especially in grid layouts
  4. Group related fields together for better user experience