SayUI
← Library→ Turn this into a prompt
Input & controls

Select / Combobox

A form control for choosing one (or more) options from a list.

Also known as dropdown select · picker · combobox

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Select / Combobox".

Add a status select with options Draft / Published / Archived: accessible trigger, listbox keyboard support, clear selected state, and form validation when empty if required.

Anatomy:
- field / trigger: Shows the current value and opens the list.
- options list: Scrollable options; optional search for long lists.

Preferred API / pattern: `shadcn Select / Combobox (cmdk)`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Custom select without typeahead or arrow keys.
  • ○Avoid: Using select for navigation actions
  • ○Avoid: Hundreds of options with no filter

In plain wordsHow people search for it

“the dropdown where I pick one option from a list”“a country picker or status menu in a form”“that field that opens a list so I don't have to type everything”

AnatomyOpen for part names

field / trigger
Shows the current value and opens the list.
options list
Scrollable options; optional search for long lists.

How to write itOpen for stack patterns

Web (HTML/CSS)<select> / listbox pattern
React + Tailwind + shadcn/uishadcn Select / Combobox (cmdk)
SwiftUIPicker
Ant Design<Select>

Notes

Native <select> is fine for simple cases; custom selects need full keyboard support. Use combobox+search when options are long. Don't use a select for actions (that's a menu). Placeholder is not a real value—validate required fields.

Common mistakesHumans and models trip here

  • Custom select without typeahead or arrow keys.
  • Using select for navigation actions: use a menu or links.
  • Hundreds of options with no filter: add a combobox search.

More failure symptoms on AI broke it.

Related patterns

Dropdown MenuA compact menu of actions or options revealed from a trigger control.Checkbox & RadioCheckboxes for multi-select; radios for a single choice in a group.Segmented ControlA compact mutually exclusive button group—often for simple view modes.

Spotted a wrong name or missing pattern?

Message on X