Select

You might be looking for:

Combobox
Type to search a long list, then pick one.
Dropdown Menu
Commands from a button — each row runs an action.

The Chip form factor on a Select choice trigger — a compact secondary pill for inline choices like a currency. Shape and trigger role are separate: Chip is how it looks, SelectTrigger is what it does. The menu that opens is still a Select list, not a Dropdown Menu. Keeps its own border/style inside a Field. Pair with Country Flag when the choice is a currency.

Playground

Size

Placeholder

<Select> <SelectTrigger className="w-45"> <SelectValue placeholder="Select a currency" /> </SelectTrigger> <SelectContent> <SelectItem value="eur">Euro (EUR)</SelectItem> <SelectItem value="usd">US Dollar (USD)</SelectItem> </SelectContent></Select>

Usage

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@sophic/portal-ui/components/ui/select";

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="one">One</SelectItem>
    <SelectItem value="two">Two</SelectItem>
  </SelectContent>
</Select>

SelectGroup, SelectLabel, and SelectSeparator are also exported for grouping long option lists. In app forms, Select is a controlled input wired through react-hook-form's Controller inside the Field family; the demo here is standalone.

Props

Select itself passes every prop through to the Radix Select.Root (value, defaultValue, onValueChange, disabled, ...). The subcomponents below add props on top of their Radix counterparts.

SelectTrigger

Prop

Type

Default

SelectItem

Prop

Type

Default

Tokens

Select reads --input-* on the default trigger, --dropdown-* on chip, --menu-* on the list, and --field-control-* inside a Field card. Fallbacks keep apps without those tokens on the previous look.

Changelog

4 October 2026 — Open list frost via --popover / --popover-blur. Full notes
3 October 2026 — Dark trigger fill tracks Field (one step above the card). Full notes
8 September 2026 — Standalone trigger corners use 16px (--radius-2xl) on product tokens. Full notes
8 September 2026 — Open list shell uses 16px (--menu-radius → --radius-2xl) on product tokens. Full notes
19 August 2026 — Shared --floating-surface-shadow elevation token. Full notes
19 August 2026 — “You might be looking for” map to Combobox and Dropdown Menu. Full notes
19 August 2026 — Styles live in a CSS module; look and tokens unchanged. Full notes
22 July 2026 — Soft standalone styling shared with Input / Textarea / Input Group. Full notes
15 July 2026 — Compact currency picker is variant="chip" on the trigger. Full notes
15 July 2026 — Open menus use shared --menu-* shell (with Dropdown Menu). Full notes