Carregando…Carregando…Carregando…Carregando…Button toggle group with single/multiple selection, 3 variants, sizes and segmented/chip/filter modes.
Demo coming soon
Add a demo component to DEMOS in _showcase.tsx for inputs/chip-group
$ npx kikitocn add toggle-group@/lib/utilsimport { ToggleGroup } from "@/components/ui/cn/toggle-group/ToggleGroup";
export function ToggleGroupExample() {
return (
<ToggleGroup />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
variant | 'outline' | 'solid' | 'ghost' | 'segmented' | 'chip' | 'filter' | 'outline' | Família de renderização: outline/solid/ghost (toggle base com items[]), 'segmented' (indicador deslizante, options[]), 'chip' (chips selecionáveis, chips[]) ou 'filter' (barra de filtros com contagem, options[]) |
type | 'single' | 'multiple' | 'single' | Modo de seleção: único ou múltiplo |
items* | ToggleGroupItem[] | — | Lista de opções (variants outline/solid/ghost): { value, label, disabled? } |
options | SegmentedControlOption[] | FilterBarOption[] | undefined | variant='segmented'|'filter': lista de opções (FilterBarOption adiciona count?) |
chips | ChipGroupChip[] | undefined | variant='chip': chips { id, label, icon?, disabled? } |
multiSelect | boolean | true | variant='chip'|'filter': permite selecionar múltiplos itens |
clearable | boolean | true | variant='filter': exibe botão para limpar os filtros |
fullWidth | boolean | false | variant='segmented': expande para 100% da largura |
size | 'sm' | 'md' | 'lg' | 'md' | Tamanho dos botões |
value | string | string[] | undefined | Valor(es) selecionado(s) (controlled) |
onChange | (value: string | string[]) => void | undefined | Callback quando a seleção muda |
single · multiple
outline · solid · ghost
Controlled segmented control
Active: list
sm · md · lg
stretch
Multi-select
Single select