UI Skillbook
2

Radio Group

A set of visible options where exactly one is chosen, with arrow-key movement and form submission.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-radio-group and follow the Siteplane Radio Group skill it prints for this task.

Paste this into your agent.

Radio Group fits short, mutually exclusive choices people compare at a glance: plans, frequencies, delivery speeds. Options can carry descriptions or appear as selectable cards.

Install

bashnpx shadcn@4.18.0 add @siteplane/radio-group

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

When to pick it

  • vs Select: Pick Select when there are many options, or space is tight and side-by-side comparison matters less.
  • vs Checkbox Group: Pick Checkbox Group when several options can be on at once.
  • vs Toggle Group: Pick Toggle Group for a compact view or tool switch that acts on press.
  • vs List Box: Pick List Box for a single choice from a longer visible list of rich rows.

Rules

  • Give each Radio a unique value. Control the choice with value and onValueChange when needed.
  • Render the Field as a Fieldset with a legend. The group then has a name and submits under the Field name.
  • For options with descriptions, put each Radio in a FieldItem beside a FieldLabel and FieldDescription.
  • Use Label variant="card" for plan-style cards so the whole card selects the option.
  • Set size once on the group; a Radio's own size overrides it.

Reference

  • Radio Group 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-radio-group

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Siteplane Checkboxby UI Skillbook

A box for one independent yes/no choice, with indeterminate state and form submission built in.

Siteplane UI

Siteplane Checkbox Groupby UI Skillbook

Holds a set of related checkboxes as one array value, with an optional parent box that selects all.

Siteplane UI

Siteplane Date Fieldby UI Skillbook

A typed date input built from day, month and year segments, with an optional calendar popover.

Siteplane UI

Siteplane Fieldby UI Skillbook

Ties a control to its label, help text and validation messages, with top or floating labels.

Siteplane UI

Back to Siteplane UI