UI Skillbook
2

List Box

An always-visible list where one row is selected, with rich multiline rows and typeahead.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-list-box and follow the Siteplane List Box skill it prints for this task.

Paste this into your agent.

List Box holds a single choice from a short to medium list that stays on screen, such as a workspace or template with descriptions. It fits side panels and pickers inside dialogs.

Install

bashnpx shadcn@4.18.0 add @siteplane/list-box

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

When to pick it

  • vs Select: Pick Select when the options should hide in a popup until needed.
  • vs Radio Group: Pick Radio Group for a plain form question that must submit natively.
  • vs Combobox: Pick Combobox when the list needs text search.
  • vs Menu: Pick Menu when the rows trigger actions and hold no selection.

Rules

  • Give each ListBoxItem a stable string value and control selection with value and onValueChange.
  • Name the list with a visible FieldLabel referenced by aria-labelledby, or an aria-label.
  • Set textValue on rich items so typeahead matches the title only.
  • Serialize the selection yourself. List Box submits no native form value and has no multiple mode.
  • Use selectionAppearance="row" when the check mark adds noise to rich rows.

Reference

  • List Box 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-list-box

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