# Morph Select

Select em que o próprio gatilho cresce e vira a lista, sem uma segunda caixa aparecendo embaixo.

- Nome no registry: `morph-select`
- Tipo: componente
- Dependências npm: lucide-react, motion
- Demo: https://ui.visantlabs.com/c/morph-select
- Categorias: controles, select, listbox, formulario, morph, teclado

## Quando usar

- Use quando: Select de formulário em que o gatilho cresce e vira a lista, pra listas médias de opções
- Evite quando: Até 5 opções visíveis: segmented-control; escolha lúdica entre poucas, magnetic-select

## Instalar

```bash
npx shadcn@latest add @visant/morph-select
```

## Usar

```tsx
<MorphSelect
  label="Status"
  value="andamento"
/>
```

## API

### MorphSelect

- `items: MorphSelectItem[]`
- `label: string` — Rótulo visível; também dá nome ao gatilho e à lista.
- `align?: "start" | "end" = "start"` — A borda que fica parada enquanto a superfície cresce. Use `end` perto da margem direita.
- `className?: string`
- `defaultValue?: string = "null"`
- `disabled?: boolean`
- `hideLabel?: boolean = false` — Guarda o rótulo só pra leitor de tela.
- `maxListHeight?: number = 280` — Altura da lista antes de rolar, em px.
- `onValueChange?: (value: string, item: MorphSelectItem) => void`
- `panelWidth?: number = 260` — Largura da superfície aberta, em px. Nunca menor que o gatilho.
- `placeholder?: string = "Escolha"` — Texto do gatilho quando nada foi escolhido.
- `value?: string` — Valor controlado. Sem ele, o select guarda o próprio estado.