## Segmented
Switch between a few mutually-exclusive options inline — labels, leading icons, or icon-only, in three sizes.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-segmented> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings.
Props:
- options: string | JSON array, default —. Pipe labels "Day|Week|Month" OR items [{value,label?,icon?,disabled?,ariaLabel?}]
- value: string, default first option. Selected option value
- size: 'small' | 'medium' | 'large', default medium. Height/padding/font/radius scale
- block: boolean, default false. Full-width; options flex-equal
- disabled: boolean, default false. Dims and disables the whole control
- change: CustomEvent<{value,index}>, default —. Composed event; read e.detail.value
Tokens: gray-20, gray-100, bg-container, text-secondary, text-default, text-disabled, color-primary, radius-xs, radius-sm, radius-default, radius-lg, font-product, motion-mid, ease-in-out, ease-in-out-circ.
Use when: Segmented (2–4 short, mutually-exclusive views or modes that switch in place); Tabs (navigating between larger content panels); Select (one option from a longer list that needn't be all visible).