UI Skillbook
2

Checkbox

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

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

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

Paste this into your agent.

Checkbox covers agreements, opt-ins and single options that are checked or not and submit with a form. It is also the option inside a Checkbox Group.

Install

bashnpx shadcn@4.18.0 add @siteplane/checkbox

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

When to pick it

  • vs Switch: Pick Switch for a setting that takes effect on change, like enabling notifications.
  • vs Checkbox Group: Pick Checkbox Group when several related options share one name and selection.
  • vs Radio Group: Pick Radio Group when exactly one option of a set must be chosen.
  • vs Toggle: Pick Toggle for a pressed tool state in a toolbar. Checkbox holds a form value.

Rules

  • Wrap the box and its text in FieldLabel or Label so clicking the text toggles it.
  • Use checked with onCheckedChange only when the app owns the value. Otherwise use defaultChecked.
  • Set uncheckedValue when the server needs a value for the unchecked state. Without it, an unchecked box sends nothing.
  • aria-invalid only styles the box. Field and FieldError carry the error itself.
  • Use Label variant="card" for card-style options instead of rebuilding checked styles.

Reference

  • Checkbox 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-checkbox

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

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

Siteplane Fieldsetby UI Skillbook

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

Siteplane UI

Back to Siteplane UI