Primitive Adaptersregistry/ui/select.tsx/r/select.json

Select

Accessible listbox selector adapter with linked label, marker-yellow ▼ caret, and ink-inverted active item.

← All Components

Light · Paper.f12-theme-light

Interactive preview

Recovery channel

Dark · Flashback.f12-theme-dark

Interactive preview

Recovery channel

Install & copy-in source

shadcn CLI (select.json)

npx shadcn@latest add https://frame12.dev/r/select.json

Usage example (Select)

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/frame12';

export function ChannelSelect() {
  return (
    <Select defaultValue="cart" label="Intervention channel">
      <SelectTrigger><SelectValue /></SelectTrigger>
      <SelectContent>
        <SelectItem value="cart">Abandoned-cart email</SelectItem>
        <SelectItem value="exit">Exit-intent offer</SelectItem>
        <SelectItem value="stock">Back-in-stock alert</SelectItem>
      </SelectContent>
    </Select>
  );
}

WCAG AAAccessibility guarantees

Accessibility notes

Exposes aria-haspopup="listbox", aria-expanded, and role="listbox" with aria-selected on options.
Dismisses on Escape or outside pointer down.

GrammarFRAME/12 rules

Design grammar

Uses a marker-yellow ▼ caret badge and a ✓ marker check on the selected option.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/select.tsx)
Prop	Type	Default	Description
`value / defaultValue`	`string`	`''`	Controlled or uncontrolled selected item value.
`onValueChange`	`(value: string) => void`	`undefined`	Callback fired when an option is selected.
`label`	`string`	`undefined`	Optional visible <label> automatically linked to the trigger button.