Ravox KitFormulário
Segmentado
Para trocar entre poucas opções, como 7d / 30d / 90d. Em botões, é um grupo de radios com setas do teclado; em links (asChild), vira navegação com aria-current. A marca do ativo desliza.
Ajustes
Conteúdo
Tamanho
Instalação
O shadcn cria components/ui/segmentado.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/segmentado.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| valor / aoTrocar | string / (valor: string) => void | — | Modo controlado (Segmentado). Com links, o valor vem da URL. |
| padrao | string | — | Ativo no começo, modo não controlado (Segmentado). |
| navegacao | boolean | false | Os segmentos são links: vira <nav> e o ativo leva aria-current="page" (Segmentado). |
| tamanho | "pequeno" | "medio" | "medio" | Altura: 28 ou 36px (Segmentado). |
| valor | string | — | Identifica o segmento (SegmentadoItem). |
| asChild | boolean | false | Passa o visual para o filho, como o <Link> do Next, em vez de criar um botão (SegmentadoItem). |