Component Card

Select

Let users choose one option from a predefined list.

Select anatomy

When to Use

Single-choice fields like role, timezone, or country.
Moderate option sets where radio groups would take too much space.
Consistent forms that need predictable validation.

When NOT to Use

Use select when users already know the category and can scan a compact list.

For 3-5 visible choices with clear labels, use radio buttons instead.

Variants

Default dropdown

Searchable combobox

Grouped options

Confused?

Use Select for picking one known value, and use Text Input when users must type unique values.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Implement a select control with placeholder, option list, keyboard navigation, and error styling for required fields.

Pencil Prompt

Create a select input showing closed, open, and selected states while keeping trigger text and chevron alignment consistent.

Next Lesson

Checkbox