{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"select","type":"registry:component","title":"Select","description":"A choice from a list that is never the browser's dropdown: the pill grows into its list and folds back as the label morphs.","author":"Hairline UI","dependencies":[],"registryDependencies":["https://hairlineui.com/r/text-morph.json?as=dependency"],"files":[{"path":"registry/select.tsx","type":"registry:component","content":"// Hairline UI · select · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n\"use client\";\n\nimport * as React from \"react\";\nimport { Field, useFieldIds } from \"./field\";\nimport { PillSelect, type PillOption, type PillSelectProps } from \"./pill-select\";\n\n/* ─────────────────────────────────────────────────────────\n * SELECT: a choice from a list, never the browser's dropdown\n *\n * open the pill grows into its list (size and corners ease)\n * from the edge it lines up with; upward when there's\n * no room below; long lists scroll\n * pick the list folds back into the pill and the label\n * morphs to the choice, which carries a drawn check\n * keys arrows glide a highlight, typing finds an option,\n * Enter picks, Escape folds it back\n *\n * The list lives in a portal, so no toolbar, card or scroller\n * clips it. Labelled and hinted like every other field.\n * ───────────────────────────────────────────────────────── */\n\nexport type SelectOption = PillOption;\n\nexport interface SelectProps extends Omit {\n /** Shown above; also the accessible name. */\n label: string;\n /** Hide the label visually (it stays the accessible name). */\n hideLabel?: boolean;\n hint?: React.ReactNode;\n error?: React.ReactNode;\n value?: string | null;\n defaultValue?: string | null;\n onValueChange?: (value: string) => void;\n id?: string;\n}\n\nexport function Select({ label, hideLabel, hint, error, value, defaultValue = null, onValueChange, id, className = \"\", block = true, size = \"md\", ...props }: SelectProps) {\n const ids = useFieldIds(id);\n const [own, setOwn] = React.useState(defaultValue);\n const current = value !== undefined ? value : own;\n return (\n \n {\n if (value === undefined) setOwn(v);\n onValueChange?.(v);\n }}\n />\n \n );\n}\n\nexport default Select;\n"},{"path":"registry/field.tsx","type":"registry:component","content":"// Hairline UI · select · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n\"use client\";\n\nimport * as React from \"react\";\nimport { EASE_OUT, useInteractionReducedMotion } from \"./ui-interaction-motion\";\n\n/* ─────────────────────────────────────────────────────────\n * FIELD: the column every text control sits in\n *\n * label above, with an optional aside on the right (a count)\n * hint under the control while all is well\n * error takes the hint's place: the hint folds away, the\n * error rises in out of a blur, the control shakes once\n *\n * Shared by input, textarea, password, search and select so the\n * whole family has one surface, one focus ring and one error.\n * ───────────────────────────────────────────────────────── */\n\nexport interface FieldProps {\n id: string;\n label?: React.ReactNode;\n /** Right side of the label row, e.g. a character count. */\n aside?: React.ReactNode;\n hint?: React.ReactNode;\n error?: React.ReactNode;\n required?: boolean;\n className?: string;\n children: React.ReactNode;\n}\n\nexport type FieldSize = \"sm\" | \"md\";\n\n/** The surface of a text control: a hairline that darkens on hover and turns to the ring on focus. */\nexport function fieldSurface({ invalid, disabled, round = true }: { invalid?: boolean; disabled?: boolean; round?: boolean }) {\n const ring = invalid\n ? \"shadow-[inset_0_0_0_1px_color-mix(in_oklab,var(--color-red-500)_55%,transparent)] focus-within:shadow-[inset_0_0_0_1px_var(--color-red-500),0_0_0_3px_color-mix(in_oklab,var(--color-red-500)_14%,transparent)]\"\n : \"shadow-[inset_0_0_0_1px_var(--border)] [&:not(:focus-within)]:hover:shadow-[inset_0_0_0_1px_color-mix(in_oklab,var(--foreground)_24%,var(--border))] focus-within:shadow-[inset_0_0_0_1px_var(--ring),0_0_0_3px_color-mix(in_oklab,var(--ring)_16%,transparent)]\";\n return `relative flex w-full items-center bg-background text-foreground transition-[box-shadow,background-color,opacity] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] ${round ? \"rounded-full\" : \"rounded-[14px]\"} ${ring} ${\n disabled ? \"pointer-events-none opacity-50\" : \"\"\n }`;\n}\n\n/** ids for the control's label, hint and error. */\nexport function useFieldIds(id?: string) {\n const auto = React.useId();\n const base = id ?? auto;\n return { id: base, hint: `${base}-hint`, error: `${base}-error` };\n}\n\n/** One short shake whenever `on` turns true (an error arrives). */\nexport function useShake(on: boolean) {\n const ref = React.useRef(null);\n const reduced = useInteractionReducedMotion();\n React.useEffect(() => {\n if (!on || reduced) return;\n ref.current?.animate(\n [{ transform: \"none\" }, { transform: \"translateX(-4px)\" }, { transform: \"translateX(4px)\" }, { transform: \"translateX(-2px)\" }, { transform: \"none\" }],\n { duration: 380, easing: \"ease-out\" },\n );\n }, [on, reduced]);\n return ref;\n}\n\n/** Sets a native input's value so React's onChange still fires (clear buttons, pickers). */\nexport function setNativeValue(el: HTMLInputElement | HTMLTextAreaElement, value: string) {\n const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;\n Object.getOwnPropertyDescriptor(proto, \"value\")?.set?.call(el, value);\n el.dispatchEvent(new Event(\"input\", { bubbles: true }));\n}\n\n/** A line under the control that folds open and closed; keeps its last words while closing. */\nfunction Line({ show, children, id, tone, reduced }: { show: boolean; children: React.ReactNode; id: string; tone: string; reduced: boolean }) {\n const [kept, setKept] = React.useState(children);\n if (show && children !== kept) setKept(children);\n return (\n \n
\n \n {show ? children : kept}\n

\n
\n \n );\n}\n\nexport function Field({ id, label, aside, hint, error, required, className = \"\", children }: FieldProps) {\n const reduced = useInteractionReducedMotion();\n const ids = { hint: `${id}-hint`, error: `${id}-error` };\n return (\n
\n {(label || aside) && (\n
\n {label && (\n \n )}\n {aside && {aside}}\n
\n )}\n {children}\n \n {hint}\n \n \n {error}\n \n
\n );\n}\n\nexport default Field;\n"},{"path":"registry/pill-select.tsx","type":"registry:component","content":"// Hairline UI · select · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { TextMorph } from \"./text-morph\";\n\n/* ─────────────────────────────────────────────────────────\n * PILL SELECT: a select that's the same surface as its pill\n *\n * open the pill grows into its list (size and corners\n * ease) from the edge it's lined up with, while its\n * label fades into the options; it opens upward when\n * there's no room below, and long lists scroll\n * pick the list folds back into the pill and the label\n * morphs to the new choice; the current option\n * carries a drawn check\n * keys arrows move a highlight that glides between rows,\n * Home and End jump, typing a few letters finds an\n * option, Enter picks, Escape folds it back\n *\n * The list lives in a portal on the page's body, placed over\n * the pill, so a clipping toolbar, fold or scroller never cuts\n * it off; it carries the theme's colours with it. Scrolling\n * the page closes it.\n *\n * Used wherever a component needs a choice from a list; never\n * the browser's own dropdown, which can't follow the theme.\n * ───────────────────────────────────────────────────────── */\n\nexport interface PillOption {\n value: string;\n label: string;\n /** A second line in the list, e.g. a sample value. */\n description?: string;\n}\n\nexport interface PillSelectProps {\n options: PillOption[];\n value: string | null | undefined;\n onValueChange: (value: string) => void;\n /** Accessible name, e.g. \"Column for Email\". */\n label: string;\n /** Shown while nothing is chosen. */\n placeholder?: string;\n /** What the pill shows for a choice; the option's label by default. */\n display?: (option: PillOption | undefined) => string;\n /** The pill's contents, when it needs more than text (an icon that turns). */\n renderValue?: (option: PillOption | undefined, open: boolean) => React.ReactNode;\n /** Monospace labels, for code-like values (event names, column headers). */\n mono?: boolean;\n /** Which edge of the pill the list lines up with. */\n align?: \"start\" | \"end\";\n /** The list's width; never narrower than the pill. */\n width?: number;\n /** Fill the width it's given. */\n block?: boolean;\n /** Dims the pill's text, e.g. for \"Don't import\". */\n muted?: boolean;\n disabled?: boolean;\n /** \"sm\" is the 28px pill for toolbars; \"md\" is 36px, the height of the other form fields. */\n size?: \"sm\" | \"md\";\n className?: string;\n}\n\ntype Phase = \"closed\" | \"opening\" | \"open\" | \"closing\";\n\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst DURATION = 420;\nconst MAX_LIST = 280;\nconst PILL_SIZE = { sm: \"h-7 px-2.5 text-[12px]\", md: \"h-9 pl-4 pr-3.5 text-[13.5px]\" };\n// The theme travels with the list, so it matches the pill wherever the pill's colours were set.\nconst TOKENS = [\"--background\", \"--foreground\", \"--popover\", \"--popover-foreground\", \"--border\", \"--accent\", \"--accent-foreground\", \"--primary\", \"--primary-foreground\", \"--muted\", \"--muted-foreground\", \"--ring\"];\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40\";\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);\n\nfunction Chevron({ up, reduced }: { up: boolean; reduced: boolean }) {\n return (\n \n \n \n );\n}\n\nexport function PillSelect({\n options,\n value,\n onValueChange,\n label,\n placeholder = \"Choose\",\n display,\n renderValue,\n mono = false,\n align = \"start\",\n width = 240,\n block = false,\n muted = false,\n disabled = false,\n size = \"sm\",\n className = \"\",\n}: PillSelectProps) {\n const id = React.useId();\n const reduced = useReducedMotion();\n const [phase, setPhase] = React.useState(\"closed\");\n const [active, setActive] = React.useState(0);\n const [pill, setPill] = React.useState({ width: 0, height: 28 });\n const [panelHeight, setPanelHeight] = React.useState(0);\n const [fit, setFit] = React.useState({ up: false, width, shift: 0, x: 0, y: 0, theme: {} as Record });\n const [highlight, setHighlight] = React.useState({ top: 0, height: 0, ready: false });\n const [quiet, setQuiet] = React.useState(false);\n const wrapRef = React.useRef(null);\n const triggerRef = React.useRef(null);\n const panelRef = React.useRef(null);\n const surfaceRef = React.useRef(null);\n const listRef = React.useRef(null);\n const rowRefs = React.useRef<(HTMLDivElement | null)[]>([]);\n const timer = React.useRef(0);\n const typed = React.useRef({ text: \"\", at: 0 });\n const selected = options.find((o) => o.value === value);\n const expanded = phase === \"open\";\n const mounted = phase !== \"closed\";\n const [prevPhase, setPrevPhase] = React.useState(phase);\n if (phase !== prevPhase) {\n setPrevPhase(phase);\n if (phase === \"closed\") {\n setHighlight({ top: 0, height: 0, ready: false });\n }\n }\n const text = display ? display(selected) : (selected?.label ?? placeholder);\n\n const measureFit = () => {\n const wrap = wrapRef.current;\n if (!wrap) return;\n const rect = wrap.getBoundingClientRect();\n const vw = document.documentElement.clientWidth;\n const w = Math.min(Math.max(width, rect.width), vw - 24);\n // Lined up with the pill's edge, nudged back on screen.\n const shift = align === \"start\" ? Math.min(0, vw - 12 - (rect.left + w)) : Math.max(0, 12 - (rect.right - w));\n const estimate = Math.min(MAX_LIST, options.length * (options.some((o) => o.description) ? 46 : 32)) + 12;\n const vh = window.innerHeight;\n const below = vh - 8 - rect.top;\n const above = rect.bottom - 8;\n const up = below < estimate + 8 && above > below;\n // Fixed coordinates of the pill's corner the list grows from.\n const x = align === \"start\" ? rect.left : vw - rect.right;\n const y = up ? vh - rect.bottom : rect.top;\n const cs = getComputedStyle(wrap);\n const theme: Record = { colorScheme: cs.colorScheme, fontFamily: cs.fontFamily };\n for (const t of TOKENS) {\n const v = cs.getPropertyValue(t);\n if (v) theme[t] = v;\n }\n setFit({ up, width: w, shift, x, y, theme });\n };\n\n const open = () => {\n if (disabled || phase === \"open\" || phase === \"opening\") return;\n window.clearTimeout(timer.current);\n measureFit();\n setActive(Math.max(0, options.findIndex((o) => o.value === value)));\n setPhase(reduced ? \"open\" : \"opening\");\n };\n\n const close = React.useCallback(\n (refocus = true) => {\n window.clearTimeout(timer.current);\n if (refocus) triggerRef.current?.focus({ preventScroll: true });\n if (reduced) return setPhase(\"closed\");\n setPhase(\"closing\");\n timer.current = window.setTimeout(() => setPhase(\"closed\"), DURATION);\n },\n [reduced],\n );\n\n React.useEffect(() => {\n if (phase !== \"opening\") return;\n let inner = 0;\n const outer = requestAnimationFrame(() => (inner = requestAnimationFrame(() => setPhase(\"open\"))));\n return () => {\n cancelAnimationFrame(outer);\n cancelAnimationFrame(inner);\n };\n }, [phase]);\n React.useEffect(() => () => window.clearTimeout(timer.current), []);\n\n React.useLayoutEffect(() => {\n const trigger = triggerRef.current;\n if (!trigger) return;\n const measure = () => setPill((p) => (p.width === trigger.offsetWidth && p.height === trigger.offsetHeight ? p : { width: trigger.offsetWidth, height: trigger.offsetHeight }));\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(trigger);\n return () => observer.disconnect();\n }, []);\n\n React.useLayoutEffect(() => {\n const panel = panelRef.current;\n if (panel) setPanelHeight(panel.offsetHeight);\n }, [mounted, options]);\n\n // The highlight glides to the active row, and the list scrolls to keep it in view.\n React.useLayoutEffect(() => {\n const row = rowRefs.current[active];\n const list = listRef.current;\n if (!row || !list) return;\n setHighlight((h) => (h.top === row.offsetTop && h.height === row.offsetHeight && h.ready === (h.ready || expanded) ? h : { top: row.offsetTop, height: row.offsetHeight, ready: h.ready || expanded }));\n const scroller = list.parentElement;\n if (scroller && scroller.scrollHeight > scroller.clientHeight) {\n if (row.offsetTop < scroller.scrollTop) scroller.scrollTop = row.offsetTop - 4;\n else if (row.offsetTop + row.offsetHeight > scroller.scrollTop + scroller.clientHeight) scroller.scrollTop = row.offsetTop + row.offsetHeight - scroller.clientHeight + 4;\n }\n }, [active, expanded, mounted]);\n\n React.useEffect(() => {\n if (expanded) listRef.current?.focus({ preventScroll: true });\n }, [expanded]);\n\n React.useEffect(() => {\n if (!expanded) return;\n const inside = (n: Node) => Boolean(wrapRef.current?.contains(n) || surfaceRef.current?.contains(n));\n const onDown = (e: PointerEvent) => {\n if (!inside(e.target as Node)) close(false);\n };\n // The list sits where the pill was; if the page moves under it, it goes at once rather than fold in the wrong place.\n const gone = () => {\n window.clearTimeout(timer.current);\n setPhase(\"closed\");\n };\n const onScroll = (e: Event) => {\n if (!surfaceRef.current?.contains(e.target as Node)) gone();\n };\n const onResize = gone;\n document.addEventListener(\"pointerdown\", onDown);\n window.addEventListener(\"scroll\", onScroll, true);\n window.addEventListener(\"resize\", onResize);\n return () => {\n document.removeEventListener(\"pointerdown\", onDown);\n window.removeEventListener(\"scroll\", onScroll, true);\n window.removeEventListener(\"resize\", onResize);\n };\n }, [expanded, close]);\n\n const choose = (o: PillOption) => {\n close();\n if (o.value !== value) onValueChange(o.value);\n };\n\n const onListKey = (e: React.KeyboardEvent) => {\n const last = options.length - 1;\n const move = (to: number) => {\n e.preventDefault();\n setActive(Math.max(0, Math.min(last, to)));\n };\n if (e.key === \"ArrowDown\") move(active === last ? 0 : active + 1);\n else if (e.key === \"ArrowUp\") move(active === 0 ? last : active - 1);\n else if (e.key === \"Home\") move(0);\n else if (e.key === \"End\") move(last);\n else if (e.key === \"PageDown\") move(active + 6);\n else if (e.key === \"PageUp\") move(active - 6);\n else if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n if (options[active]) choose(options[active]);\n } else if (e.key === \"Tab\") close(false);\n else if (e.key.length === 1 && /\\S/.test(e.key)) {\n // A few letters typed quickly find the option that starts with them.\n const now = performance.now();\n typed.current = { text: (now - typed.current.at < 700 ? typed.current.text : \"\") + e.key.toLowerCase(), at: now };\n const hit = options.findIndex((o) => o.label.toLowerCase().startsWith(typed.current.text));\n if (hit !== -1) setActive(hit);\n }\n };\n\n const w = expanded ? fit.width : pill.width;\n const h = expanded ? panelHeight : pill.height;\n const listId = `${id}-list`;\n const pillText = renderValue ? null : (\n <>\n \n {block ? text : {text}}\n \n \n \n );\n\n return (\n {\n setQuiet(false);\n if (e.key === \"Escape\" && expanded) {\n e.preventDefault();\n e.stopPropagation();\n close();\n }\n }}\n onBlur={(e) => {\n const to = e.relatedTarget as Node | null;\n if (expanded && document.hasFocus() && !(to && (wrapRef.current?.contains(to) || surfaceRef.current?.contains(to)))) close(false);\n }}\n >\n (expanded ? close() : open())}\n onKeyDown={(e) => {\n if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n e.preventDefault();\n open();\n }\n }}\n onPointerDown={() => setQuiet(true)}\n className={`inline-flex ${PILL_SIZE[size]} min-w-0 cursor-pointer items-center gap-1.5 rounded-full font-medium whitespace-nowrap shadow-[inset_0_0_0_1px_var(--border)] transition-colors duration-150 hover:bg-accent disabled:cursor-default disabled:opacity-50 disabled:hover:bg-transparent ${block ? \"w-full\" : \"\"} ${quiet ? \"outline-none\" : FOCUS}`}\n >\n {renderValue ? renderValue(selected, expanded) : pillText}\n \n\n {mounted &&\n createPortal(\n {\n if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n close();\n }\n }}\n onPointerDown={(e) => {\n if (!(e.target as HTMLElement).closest(\"[data-scroll]\")) e.preventDefault();\n setQuiet(true);\n }}\n className=\"fixed z-[60] overflow-hidden bg-popover text-popover-foreground\"\n style={{\n ...fit.theme,\n [fit.up ? \"bottom\" : \"top\"]: fit.y,\n [align === \"start\" ? \"left\" : \"right\"]: fit.x + (expanded ? (align === \"start\" ? fit.shift : -fit.shift) : 0),\n width: w,\n height: h,\n borderRadius: expanded ? 16 : pill.height / 2,\n // The pill's own hairline, the whole way: it is the same surface.\n boxShadow: \"inset 0 0 0 1px var(--border)\",\n transition: reduced ? \"none\" : `width ${DURATION}ms ${EASE}, height ${DURATION}ms ${EASE}, left ${DURATION}ms ${EASE}, right ${DURATION}ms ${EASE}, border-radius ${DURATION}ms ${EASE}`,\n }}\n >\n {/* The pill's label, fading out as the surface grows and back in as it folds. */}\n \n {renderValue ? renderValue(selected, expanded) : pillText}\n \n \n
\n \n \n {options.map((o, i) => {\n const on = o.value === value;\n return (\n {\n rowRefs.current[i] = el;\n }}\n id={`${id}-o${i}`}\n role=\"option\"\n aria-selected={on}\n onPointerMove={() => setActive(i)}\n onClick={() => choose(o)}\n className=\"relative flex cursor-pointer items-start gap-2 rounded-[12px] px-2.5 py-1.5\"\n >\n \n {o.label}\n {o.description && {o.description}}\n \n \n \n \n
\n );\n })}\n \n \n \n ,\n document.body,\n )}\n \n );\n}\n"}],"css":{},"docs":"Docs and live preview: https://hairlineui.com/ui/select. MIT licensed: https://hairlineui.com/license#components","meta":{"license":"MIT"}}