Fieldset

Groups related form fields under a shared legend and optional description, and can disable them together.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-fieldset and follow the Siteplane Fieldset skill it prints for this task.

Paste this into your agent.

Fieldset puts clusters like a shipping address, billing details or a set of radio options under one shared name. Disabling the Fieldset disables every control in it.

Install

bashnpx shadcn@4.18.0 add @siteplane/fieldset

Import it from @/siteplane/components/fieldset. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Field: Pick Field for a single control; render a Field as the Fieldset when a radio or checkbox group needs a legend and one name.
  • vs Card: Pick Card for a visual container. Put a Fieldset inside it when the controls also need a shared accessible name.
  • vs Form: Pick Form for submission and validation. Fieldset groups controls and does not submit.

Rules

  • Write a FieldsetLegend that says what the controls have in common.
  • Put shared help for the group in FieldsetDescription and help for one input in FieldDescription.
  • Set disabled on Fieldset to switch off every control inside it. Keep it away from read-only displays.
  • For radio or checkbox groups, render the Field as the Fieldset. The legend then labels the whole set, and each option inherits the Field's name.

Reference

  • Fieldset docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Forms & selection. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-fieldset

MCP server

https://www.uiskillbook.com/mcp

Questions