# Segmented Control

Alternador de poucas opções. Substitui um select quando as opções cabem na tela.

- Nome no registry: `segmented-control`
- Tipo: componente
- Dependências npm: lucide-react
- Demo: https://ui.visantlabs.com/c/segmented-control
- Categorias: controles, controle, apple

## Quando usar

- Use quando: Alternar entre 2 a 5 opções que cabem na tela, como lista ou grade, ou o período de um gráfico
- Evite quando: Mensal e anual com desconto: billing-toggle; muitas opções, morph-select; liga e desliga, liquid-toggle

## Instalar

```bash
npx shadcn@latest add @visant/segmented-control
```

## Usar

```tsx
<SegmentedControl />
```

## API

### SegmentedControl

Apple-like segmented control (trilho + pill ativo). Fonte única reusada pelo cabeçalho da vitrine (seção e densidade), pelo Gallery e pelos kits.

- `onChange: (value: T) => void`
- `options: SegmentedOption<T>[]`
- `value: string`
- `animation?: "slide" | "spring" | "stretch" | "fade" = "slide"` — Como o polegar vai de uma opção pra outra.
- `aria-label?: string`
- `className?: string`
- `size?: "sm" | "md" = "md"` — Densidade. `md` é a régua da casa.
- `variant?: "fill" | "compact" = "fill"` — "fill" = itens crescem igualmente (com label); "compact" = botões de ícone.