fetaUI
GitHub

Fieldset

Fields grouped under a legend, in an inset card on the tray.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/fieldset
Playground
Address
Notifications
Notifications

Pick what reaches you and where.

Choice card
Compute environment

Choose where this cluster runs.

Environment
Delivery address
Delivery address

We need your address to deliver your order.

Budget
Team request

Tell us where the work belongs and what it can cost.

Pick the area that owns this work.
Set your budget for this request.
Profile
Profile

Fill in your profile information.

As it appears on invoices.
Unique across FetaUI.
Icons animation
Disabled
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/fieldset

Delivery address

FieldRow pairs short fields, and disabled locks every control in the set.

Delivery address

We need your address to deliver your order.

Disabled

Accessibility

  • A native fieldset and legend, so the group is announced.
  • Disabling the fieldset disables every control in it.

Motion

  • Fieldset has no motion of its own. The controls inside keep theirs.

Responsive behavior

  • FieldRow is two up on Web and stacks on Mobile.

Performance

  • No hooks and no client directive, so it adds no JavaScript of its own and renders on the server.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import Fieldset and FieldRow from @/components/fetaui/fieldset.
  • It is a native fieldset, so disabled blocks every control inside and any fieldset attribute passes through.
  • FieldRow takes two fields, side by side on Web and stacked on Mobile.
  • The demo's Save and Cancel buttons do nothing. Wrap the set in your own form.
/docs/components/fieldset/markdown
PreviousField
NextInput Group

Related

FieldComponentLabel, control and help text as one unit, so they read, validate and announce together.Radio GroupComponentPick exactly one. A surface circle that fills to an ink disc with a dot.CheckboxComponentToggles between checked and not checked, with an indeterminate value for parents of a list.SwitchComponentTurns a setting on or off and applies it at once.InputComponentThe single line text control: a pill on the tray fill that lifts onto the surface when focused.