Forms & choicesBrick 0.1.2

Fieldset

Fieldset coordinates a related control group with a legend, description, and group error.

Live example

Built from the published package

Interactive

Notifications

Select all that apply.

Choose with confidence

Know when Fieldset is the right part

Use it when

Use it for related checkboxes, radios, or controls that share one question.

Choose another path when

Use Field for one control. Fieldset does not validate children or manage their values.

Installation and imports

tsx

import { Fieldset } from "@flowstack-ui/brick/fieldset";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/fieldset.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Quick start

tsx

<Fieldset.Root>
  <Fieldset.Legend>Notifications</Fieldset.Legend>
  <Fieldset.Description>Select all that apply.</Fieldset.Description>
  {/* controls */}
</Fieldset.Root>

Visual recipes and states

Root stacks legend, description, controls, and error with separate group and control gaps. Atom ownership marks parts so description/error ids and group state stay connected.

Examples

tsx

<Fieldset.Root invalid>
  <Fieldset.Legend>Contact method</Fieldset.Legend>
  {/* choices */}
  <Fieldset.Error>Select at least one method.</Fieldset.Error>
</Fieldset.Root>

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Public exports are Fieldset, FieldsetRoot, FieldsetLegend, FieldsetDescription, FieldsetError, and their corresponding FieldsetRootProps, FieldsetLegendProps, FieldsetDescriptionProps, and FieldsetErrorProps.

Prop	Values	Default
`asChild`	`boolean`	`false`

All parts inherit Atom relationship/native props, require children, and support either one asChild element or render, never both. Root owns group required, disabled, invalid, generated relationship, and native fieldset behavior.

Shared responsibility

Accessibility

Use Legend as the group’s question. Atom maintains description/error relationships and native disabled/fieldset semantics. Errors must explain how to correct the group.

Responsive behavior

Fieldset follows available width and does not prescribe child columns or breakpoints. Keep legends and errors readable under zoom and localization.

Stable visual contract

Styling and tokens

Customization

Use native/Atom group props first, then public Fieldset tokens. Customize public parts with className, style, asChild, or render.

Tokens and CSS hooks

Stable classes/slots are brick-fieldset, brick-fieldset-legend, brick-fieldset-description, and brick-fieldset-error with matching slots and Atom state attributes. Every part forwards its overridable data-slot. Public --brick-fieldset-* tokens cover group/ control gaps, legend/description/error typography and foreground, disabled/ optional/indicator colors, and indicator gap:

--brick-fieldset-gap, --brick-fieldset-control-gap, --brick-fieldset-legend-font-family, --brick-fieldset-legend-font-size, --brick-fieldset-legend-font-weight, --brick-fieldset-legend-line-height, --brick-fieldset-legend-foreground, --brick-fieldset-legend-foreground-disabled, --brick-fieldset-description-font-size, --brick-fieldset-description-line-height, --brick-fieldset-description-foreground, --brick-fieldset-error-font-size, --brick-fieldset-error-font-weight, --brick-fieldset-error-line-height, --brick-fieldset-error-foreground, --brick-fieldset-indicator-foreground, --brick-fieldset-indicator-gap, and --brick-fieldset-optional-foreground.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground