UI Skillbook
2

Switch

An on/off control for a setting, with an optional label and description row and form submission.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

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

Paste this into your agent.

Switch fits on/off preferences and feature flags, the kind found on settings pages. People read it as a setting to change, and it fits a row with a label and description beside it.

Install

bashnpx shadcn@4.18.0 add @siteplane/switch

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

When to pick it

  • vs Checkbox: Pick Checkbox for consent, agreements or options that only matter on submit.
  • vs Toggle: Pick Toggle for a pressed tool button in an editor or toolbar.
  • vs Settings List: Pick Settings List for a full page of setting rows, each holding a Switch or another control.

Rules

  • Inside a Field, place FieldLabel and FieldDescription before the Switch so both describe it.
  • Use checked and onCheckedChange when the app saves the setting on change. Otherwise use defaultChecked.
  • Set uncheckedValue if the form must send a value while it is off.
  • Switch has no indeterminate mode, so keep it away from mixed or partial states.
  • For card rows, use Label variant="card" instead of restyling the switch.

Reference

  • Switch 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-switch

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Form Field Validation Timingby UI Skillbook

Validate at the right moment — not on every keystroke, not only on submit.

Forms

Siteplane Attachmentby UI Skillbook

A card for a file or image attached to a message or draft, with upload states and actions.

Siteplane UI

Siteplane Autocompleteby UI Skillbook

A text input that suggests completions while still accepting whatever the person types.

Siteplane UI

Siteplane Calendarby UI Skillbook

An inline month grid for picking a single date, several dates or a range, with unavailable-day rules.

Siteplane UI

Back to Siteplane UI