Pick a view

Click an option, or arrow between them — the pill springs across.

Showing the {view} view

); } ``` ## Accessibility & performance Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through. ## Source (`quorum.tsx`) ```tsx "use client"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; export interface QuorumOption { /** Unique, stable value identifying this option. */ value: string; /** Visible label. */ label: React.ReactNode; /** Disable this option — skipped by pointer and keyboard navigation. */ disabled?: boolean; } export interface QuorumProps extends Omit< React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue" | "role" > { /** The options, in order. 2–5 reads best. */ options: QuorumOption[]; /** Controlled selected value. Omit for uncontrolled use (see `defaultValue`). */ value?: string; /** Initial selected value when uncontrolled. @default first enabled option */ defaultValue?: string; /** Fires whenever the selection changes, controlled or not. */ onChange?: (value: string) => void; /** * Accessible name for the group. Provide this OR an external label via * `aria-labelledby`. @default "Choose an option" */ "aria-label"?: string; /** * The single cool accent — tints the focus ring and the settle bloom. * @default sky */ accent?: string; /** * Disable the whole control (all options unselectable). Individual options * can be disabled via `QuorumOption.disabled`. @default false */ disabled?: boolean; /** Freeze the spring — the pill still moves, but snaps. @default false */ paused?: boolean; /** Visual density. @default "md" */ size?: "sm" | "md" | "lg"; className?: string; } /** One cool accent on an otherwise neutral-elegant control. */ const DEFAULT_ACCENT = "#38bdf8"; const SIZES = { sm: "gap-0.5 p-0.5 text-[13px]", md: "gap-1 p-1 text-sm", lg: "gap-1 p-1.5 text-[15px]", } as const; const OPTION_SIZES = { sm: "px-3 py-1", md: "px-4 py-1.5", lg: "px-5 py-2", } as const; /** * Quorum — a segmented control. A row of 2–5 options with a single shared-layout * pill that springs behind the active option (via `layoutId`); the chosen label * ignites from muted neutral to full contrast and a faint accent bloom pulses as * the pill settles. Real radio semantics: `role="radiogroup"` wrapping * `role="radio"` buttons with roving tabindex, Arrow/Home/End keyboard, and * `focus-visible` rings. Controlled or uncontrolled. Under reduced motion the * pill snaps instantly (no spring) and the settle bloom is suppressed — the * resting selected state is fully styled, never blank. */ export function Quorum({ options, value, defaultValue, onChange, "aria-label": ariaLabel = "Choose an option", "aria-labelledby": ariaLabelledby, accent = DEFAULT_ACCENT, disabled = false, paused = false, size = "md", className, ...props }: QuorumProps) { const reducedMotion = useReducedMotion(); const baseId = React.useId(); const optionRefs = React.useRef>([]); // Bumped each time the pill finishes settling into an option; retriggers the // accent bloom pulse. Stays 0 on first paint so the control mounts at rest // with no flash. const [landCount, setLandCount] = React.useState(0); const firstEnabled = options.find((option) => !option.disabled)?.value ?? options[0]?.value; const [internalValue, setInternalValue] = React.useState( defaultValue ?? firstEnabled ); const activeValue = value ?? internalValue; const select = React.useCallback( (next: string) => { if (value === undefined) setInternalValue(next); onChange?.(next); }, [value, onChange] ); const nextEnabledIndex = React.useCallback( (from: number, direction: 1 | -1) => { const count = options.length; let index = from; for (let step = 0; step < count; step++) { index = (index + direction + count) % count; if (!options[index]?.disabled) return index; } return from; }, [options] ); const focusAndSelect = React.useCallback( (index: number) => { const option = options[index]; if (!option || option.disabled) return; select(option.value); optionRefs.current[index]?.focus(); }, [options, select] ); const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (disabled) return; const currentIndex = options.findIndex((o) => o.value === activeValue); let nextIndex: number | null = null; if (event.key === "ArrowRight" || event.key === "ArrowDown") nextIndex = nextEnabledIndex(currentIndex, 1); else if (event.key === "ArrowLeft" || event.key === "ArrowUp") nextIndex = nextEnabledIndex(currentIndex, -1); else if (event.key === "Home") nextIndex = nextEnabledIndex(-1, 1); else if (event.key === "End") nextIndex = nextEnabledIndex(0, -1); if (nextIndex === null) return; event.preventDefault(); focusAndSelect(nextIndex); }, [disabled, options, activeValue, nextEnabledIndex, focusAndSelect] ); // Roving tabindex: exactly one focusable stop. The selected option owns it; // if it is disabled or no option matches the value, the first enabled does. const selectedIndex = options.findIndex( (o) => o.value === activeValue && !o.disabled ); const tabStop = selectedIndex !== -1 ? selectedIndex : options.findIndex((o) => !o.disabled); return (

{options.map((option, index) => { const selected = option.value === activeValue; const tabbable = index === tabStop; return ( ); })}

); } ```