Chip

Elementos interativos compactos usados para representar filtros aplicados, opções selecionáveis e valores removíveis. A família tem quatro componentes: Chip (removível), ChipFilter (um trigger estilizado para dropdowns de filtro), ChipChoice (opção selecionável) e ChipClear (limpa os valores aplicados).

Exemplos

Chip

Um chip removível. Clicar nele dispara o onClick, normalmente usado para remover o valor. Tecnologias assistivas anunciam o label seguido de dismissLabel (padrão "Remover"). Passe um aria-label como "Remover Cardiologia" para personalizar o anúncio inteiro.

Tamanhos do Chip

Chip desabilitado

ChipFilter

Um trigger de filtro com slot de ícone no início e seta de dropdown no fim. Ele não abre nada sozinho: renderize-o dentro do DropdownMenuTrigger com asChild (ou passe-o como trigger customizado do TagPicker), que também fornece aria-expanded e aria-haspopup. Quando checked, o chip destaca o filtro aplicado, e criteria mostra o valor selecionado depois do label.

Tamanhos do ChipFilter

ChipFilter desabilitado

ChipChoice

Uma opção selecionável. Quando checked, fica destacada e mostra um ícone de check verde no fim, que vira um ícone de remover durante o hover. Expõe aria-pressed.

ChipChoice sem ícone de remover

Para uma escolha única obrigatória, em que clicar na opção marcada não deve desmarcá-la, use dismissible={false}. O chip marcado mantém o ícone de check também no hover, sem trocar pelo ícone de remover. A prop só muda o ícone: o que acontece no clique continua definido pelo onClick.

Tamanhos do ChipChoice

ChipChoice desabilitado

ChipClear

Uma ação sem borda para limpar os valores aplicados. O label padrão é "Limpar" e pode ser sobrescrito via children.

API

Chip

Propriedade	Tipo	Opções	Padrão	Descrição
size	string	"sm", "md", "lg"	"md"	Define o tamanho do chip (alturas de 32px, 40px e 48px).
dismissLabel	string	-	"Remover"	Texto visualmente oculto anunciado depois do label para descrever a ação de remover.
disabled	boolean	true, false	false	Desabilita a interação e aplica o estilo esmaecido.
className	string	-	-	Classes CSS adicionais aplicadas ao chip.
...props	Todas as props nativas de button (exceto type)	-	-	Permite passar qualquer outra propriedade padrão do elemento button.

ChipFilter

Propriedade	Tipo	Opções	Padrão	Descrição
size	string	"sm", "md", "lg"	"md"	Define o tamanho do chip.
checked	boolean	true, false	false	Destaca o chip para indicar um filtro aplicado. Um chip desabilitado mantém o estilo esmaecido mesmo quando checked.
icon	React.ReactNode	-	-	Ícone exibido antes do label. Use um ícone de @medway-ui/icons.
criteria	React.ReactNode	-	-	Valor selecionado exibido depois do label, separado por dois-pontos.
disabled	boolean	true, false	false	Desabilita a interação e aplica o estilo esmaecido.
className	string	-	-	Classes CSS adicionais aplicadas ao chip.
...props	Todas as props nativas de button (exceto type)	-	-	Permite passar qualquer outra propriedade padrão do elemento button.

ChipChoice

Propriedade	Tipo	Opções	Padrão	Descrição
size	string	"sm", "md", "lg"	"md"	Define o tamanho do chip.
checked	boolean	true, false	false	Marca a opção como selecionada: destaca o chip, mostra o ícone de check (um ícone de remover no hover, a menos que dismissible seja false) e define aria-pressed. Um chip desabilitado mantém o estilo esmaecido, mas continua mostrando o ícone de check.
dismissible	boolean	true, false	true	Quando false, o chip marcado não troca o check pelo ícone de remover no hover. Use em escolhas únicas obrigatórias. Só afeta o ícone; o clique continua sendo tratado pelo onClick.
icon	React.ReactNode	-	-	Ícone exibido antes do label. Use um ícone de @medway-ui/icons.
disabled	boolean	true, false	false	Desabilita a interação e aplica o estilo esmaecido.
className	string	-	-	Classes CSS adicionais aplicadas ao chip.
...props	Todas as props nativas de button (exceto type)	-	-	Permite passar qualquer outra propriedade padrão do elemento button.

ChipClear

Propriedade	Tipo	Opções	Padrão	Descrição
size	string	"sm", "md", "lg"	"md"	Define o tamanho do chip.
children	React.ReactNode	-	"Limpar"	Label da ação.
className	string	-	-	Classes CSS adicionais aplicadas ao chip.
...props	Todas as props nativas de button (exceto type)	-	-	Permite passar qualquer outra propriedade padrão do elemento button.