# Liquid Toggle

Um interruptor cuja bolinha escorre como gota de um lado pro outro, esticando no caminho e se recolhendo ao chegar.

- Nome no registry: `liquid-toggle`
- Tipo: componente
- Dependências npm: motion
- Demo: https://ui.visantlabs.com/c/liquid-toggle
- Categorias: controles, switch, toggle, formulario, mola

## Quando usar

- Use quando: Switch de liga e desliga em configuração ou formulário, com a bolinha escorrendo como gota
- Evite quando: Tema claro e escuro: eclipse-switch; mais de duas opções, segmented-control

## Instalar

```bash
npx shadcn@latest add @visant/liquid-toggle
```

## Usar

```tsx
<LiquidToggle
  defaultChecked
/>
```

## API

### LiquidToggle

- `checked?: boolean` — Controlado.
- `defaultChecked?: boolean = false` — Estado inicial quando não controlado.
- `onCheckedChange?: (checked: boolean) => void`
- `speed?: number = 50` — 0–100. Rapidez da mola da frente.
- `stretch?: number = 50` — 0–100. O quanto a gota se alonga no caminho.
- `stroke?: boolean = false` — Contorno na trilha, para fundos onde o `bg-muted` some.