Fieldset

Markdown for agents

Groups related form controls in a native fieldset with a legend, optional description, and an error slot.

npx slipstream-ui@latest add fieldset

With description

Notification preferences

Applies to every project in this workspace

Product updates

Security alerts

Tips & tricks

Group-level error

Billing interval

Choose how often you are charged

Monthly

Yearly

Select an interval to continue

Props

Prop	Type	Default	Description
legend	string	—	Legend rendered as the group's accessible name.
description	string	—	Muted supporting line under the legend.
error	string	—	Group-level error rendered under the controls (role=alert).
children	ReactNode	—	The controls this group names.

Accessibility

Native <fieldset>/<legend> — the legend is announced as the group name before each control.
The error slot renders with role=alert so group errors are announced when they appear.
Always pass a legend (or an equivalent aria-label).

Browser support

Browser	Tested versions
Chrome	111+ (Mar 2023)
Edge	111+ (Mar 2023)
Firefox	121+ (Dec 2023)
Safari	17.2+ — macOS & iOS (Dec 2023)

Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.

Pure native fieldset/legend semantics — supported in every browser; only the styling is Tailwind.