DesignDojo
1.2-components · 15-select

Estimated time: 6 min

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.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Checkbox