Components

Select

Native dropdown styled to the quiet UI, with a custom chevron.

Preview

components/forms/Select.jsx

Usage

src/components/ui/Select.tsx

tsx

import { Select } from "@/components/ui/Select";

<Select
  ariaLabel="Sort thought articles"
  value={sort}
  onChange={(e) => setSort(e.target.value)}
  options={[
    { value: "latest", label: "Latest to oldest" },
    { value: "reading-time", label: "Reading time" },
  ]}
/>

API

props

Prop	Type	Default	Description
options	(string \| { value; label })[]	—	Option list — plain strings become value+label pairs.
value / onChange	string / (e) => void	—	Controlled selection handlers (native select events).
ariaLabel	string	—	Accessible name when no visible label exists.

Tokens consumed

semantic only

--color-bg-elevated--color-border--color-border-hover--color-fg--color-fg-muted--transition-border--radius-sm