ChipSelector

Um grupo de seleção com estilo de chip, ideal para múltiplas ou únicas escolhas em interfaces modernas.

Utilização

index.tsx
import { ChipSelector, ChipSelectorItem } from "@convertcompany/ui";

Exemplos

Múltipla seleção

Com a propriedade type definida como multiple, você pode selecionar vários itens ao mesmo tempo.

Você pode selecionar vários itens

Seleção única

Com a propriedade type definida como single, apenas um item pode ser selecionado por vez.

Você pode selecionar somente um item

Tamanhos e variações

Você pode personalizar o tamanho e a aparência dos chips usando as propriedades size, variant e color. Consulte a documentação do Chip para saber mais

Props

Esse componente extende a implementação do Radix UI, e por isso, possui as mesmas propriedades. Para mais detalhes, consulte a documentação oficial.

ChipSelector

PropriedadeTipo
typeDefine se a seleção é múltipla ou única.
multiple
single
variantEstilo visual dos chips.
default
primary
outline
colorCor dos chips.
gray
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
pink
fuchsia
rose
sizeTamanho dos chips.
sm
md
lg
showCheckmarkExibe ícone de confirmação nos chips ativos.
boolean
itemPropsProps padrão herdadas pelos itens internos.
ToggleGroupItemProps
classNameClasse CSS adicional para estilização do container.
string
childrenElementos filhos do tipo ChipSelectorItem.
ReactNode

ChipSelectorItem

PropriedadeTipo
valueValor único do item.
string
...propsDemais props do elemento div.
HTMLDivElement