Components / ToolbarFilterSelect
ToolbarFilterSelect
The standard toolbar filter: choosing one value from a fixed option list to narrow the surface below (status, platform, date range). It is Select pre-shaped for toolbars — flat trigger, 32px, every item in a SelectGroup — so toolbar call sites pass options instead of re-composing the anatomy.
import { ToolbarFilterSelect } from '@layers/ui/toolbar-filter-select'Rendered stock
House rules
- Toolbar controls are uniformly 32px, so size="sm" is hardcoded — there is no size prop. A filter that needs the 36px form-field height belongs in a form, not a toolbar; use Select directly.
- Alignment is the CALL SITE's responsibility (rules.md: "Popups anchor to their trigger's side"): a left-side control opens align="start" (popup grows rightward), a right-side control opens align="end" (popup grows leftward) — the popup must never hang off its control toward the empty side. The component exposes `align` instead of hardcoding one because the same filter can sit on either side.
- Every SelectItem sits inside a SelectGroup — the component composes that anatomy for you; the option list is just {value, label} pairs.
- Options carry labels distinct from their values, so they are passed to the Select root as items — the closed trigger shows the label, never the raw value.