UI Skillbook
2

Label

A plain visible label for a native control, plus a card variant for checkbox, radio and switch options.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

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

Paste this into your agent.

Label names a control outside a Field, or wraps a checkbox, radio or switch with its sentence so the text is clickable. The card variant turns each option into a bordered, selectable tile.

Install

bashnpx shadcn@4.18.0 add @siteplane/label

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

When to pick it

  • vs Field: Pick Field with FieldLabel when you also need help text, a required marker or validation wired to the control.
  • vs Fieldset: Pick Fieldset to name a group of controls with a legend.

Rules

  • Connect it with htmlFor to the control's id, or wrap the control inside it.
  • Use variant="card" for choice cards and let Label own the border, hover, checked and disabled styles.
  • Keep secondary buttons outside a card Label so clicking them does not toggle the option.
  • Label is no stand-in for FieldLabel. It adds no required marker, help or validation.
  • Keep the native element. If you swap it via render, restore native label behavior yourself.

Reference

  • Label 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-label

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