## Glass Segmented (S—473)

A segmented control on glass whose clear thumb stretches toward its target and refracts the scene.

- URL: https://sundaeui.dev/components/glass-segmented
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/glass-segmented.json`
- Tags: tabs, refraction, liquid-glass, frosted, toggle, segmented, glass

A glass track holds the options; the thumb is a droplet of clearer glass with its own rim light. When the selection changes it stretches in the direction of travel, then settles on a spring.
In Chromium the thumb bends the background through an SVG displacement filter, so the photo behind it warps like it would through real glass. Other browsers get the same thumb with blur and brightness, which still reads as glass.
It is a radiogroup with roving focus: arrow keys move and select, Home and End jump.

### Usage

```tsx
import { GlassSegmented } from '@/components/sundae/glass-segmented'

<GlassSegmented
  label="Range"
  options={[{ value: 'day', label: 'Day' }, { value: 'week', label: 'Week' }, { value: 'month', label: 'Month' }]}
  defaultValue="week"
  onValueChange={setRange}
/>
```

### Props

- `options` (`{ value: string; label: string }[]`, required): Segments.
- `value / defaultValue` (`string`): Selected value (controlled / uncontrolled).
- `onValueChange` (`(value: string) => void`): Called when the selection changes.
- `label` (`string`, required): Accessible name of the group.
- `refract` (`boolean`, default `true`): Bend the background through the thumb where supported.

### When to use

- Switching views over a photo or video, such as galleries, maps and media apps.
- A floating control on an expressive hero.

### When not to use

- On flat surfaces: use Segmented Control.
- More than five options: use a select.

### Accessibility

- role="radiogroup" with role="radio" options, aria-checked and roving tabindex.
- Arrow keys move and select; Home/End jump to the ends.
- Reduced motion removes the stretch and the spring; the selection still moves.