Layout UI

Select

Accessible single-value select built on Base UI Select. Trigger styled like Input with chevron icon; popup with group labels, separators, and check indicators.

Preview

Installation

bash
npx shadcn@latest add @layout/select

Usage

tsx
import { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator } from "@/registry/layout/select/select";

Examples

Plan selector

Disabled state

Guidelines for AI agents

Use Select when the list of options is fixed and known up front, with no need to type-filter. Pass defaultValue or value+onValueChange for controlled use. Group related options with SelectGroup and SelectLabel; divide sections with SelectSeparator. Use Combobox when the list is long and users need to filter by typing. Use a native <select> for forms where browser-native UX is preferred or file-size budget is tight.

Never

  • Neveruse Select for lists longer than ~50 items where filtering would help; use Combobox instead
  • Neveruse Select for boolean choices; use a Switch or Checkbox which are more semantically appropriate
  • Nevermix SelectGroup items with un-grouped items in the same popup; all items should be grouped or none should be
  • Neverplace SelectContent outside of a Select.Root; it relies on context provided by the root

Tokens consumed

--layout-input--layout-ring--layout-popover--layout-popover-fg--layout-accent--layout-accent-fg--layout-border--layout-radius--layout-shadow-md--layout-duration-base