# Segmented
> Generated from segmented.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `options` | string | JSON array | `—` | Pipe labels "Day|Week|Month" OR items [{value,label?,icon?,disabled?,ariaLabel?}] |
| `value` | string | `first option` | Selected option value |
| `size` | 'small' | 'medium' | 'large' | `medium` | Height/padding/font/radius scale |
| `block` | boolean | `false` | Full-width; options flex-equal |
| `disabled` | boolean | `false` | Dims and disables the whole control |
| `change` | CustomEvent<{value,index}> | `—` | Composed event; read e.detail.value |

## Visual standard (measured)
- Track: gray-20 #F7F7F7, radius 8 (sm 6 · lg 12), pad 2
- Thumb: bg-container #FFFFFF, radius 6, slides on select
- Segment: medium h32 pad 0 16 · small h24 12/12px · large h40 20/16px, SemiBold 600
- Content: label · leading icon (16) + label · icon-only (aria-label required)
- Selected: text-default #1A1A1A over the thumb
- Disabled: per-option or whole control → text-disabled, not-allowed
- Block: full-width track, options flex-equal

## When to use
- **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

Keep labels to one word where possible and the option count small (2–4). Icon-only options MUST carry an aria-label. It is a single-select control — for a magnitude use Rate or a Slider.