Chip

Chips — escolhas compactas que filtram uma lista, ou pequenos valores removíveis, como pessoas e etiquetas. O ChipGroup reúne chips de filtro sob um nome, com navegação pelas setas.

Feito com Base UIPadrão WAI-ARIA Button (toggle)Componente clienteCódigo ↗

minimal · light · #3fa34d

defaultPressed

disabled

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. O estilo carregado define o visual.

import { Chip, ChipGroup } from "@camaleo/react";

Anatomia

Um chip de filtro é um botão de alternância com um check que aparece quando pressionado. Um chip de entrada (com onRemove) é um span com um botão de remover no fim.

checkEm revisãoremover

[data-slot="chip"][data-slot="chip-check"] · avatar · [data-slot="chip-remove"]rótulo (children)

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.

minimal · light · #3fa34d

Mostrando 17 de 42 chamados

Filtros com contagem

Pressione os chips. A contagem no rótulo mostra o que esperar, e uma linha com role="status" anuncia quantos resultados sobraram.

Seleção única

O multiple={false} deixa um chip pressionado por vez, mas ainda dá para despressionar. Quando a escolha vazia não é permitida, use um radio group.

DesignUrgenteLançamento do 4º tri

Removível

Remova uma etiqueta. O onRemove transforma o chip em chip de entrada, o removeLabel chama o botão de "Remover Urgente", e o foco fica na lista em vez de cair no corpo da página.

ASAna SouzaCPCarlos Pereira

Pessoas, com avatar

O avatar recebe um Avatar pequeno. As iniciais são decoração: o nome no chip e no removeLabel é o que a tecnologia assistiva lê.

Sozinho

Um Chip sozinho é um botão de alternância com aria-pressed, bom para um filtro rápido como "Só não lidas" acima de uma lista.

Com ícone

Um ícone ajuda a percorrer um conjunto grande. Marque com data-slot="icon" e aria-hidden; o texto continua levando o significado.

Chamados arquivados não podem ser filtrados durante a limpeza anual.

Desativado, com motivo

As setas pulam um chip desativado. Diga o motivo num texto ligado por aria-describedby, senão a pessoa acha que o filtro quebrou.

Em contexto

Chips ficam acima de resultados, em painéis de filtro e em diálogos de compartilhamento. São pedaços inteiros de interface para copiar, no estilo que você escolheu.

Filtrar hospedagens

Florianópolis · 14/11 – 18/11 · 2 hóspedes

Comodidades

Quartos

Painel de filtrosCard · ChipGroup · Chip · Button

Compartilhar “Receita do 3º tri”

Quem você adicionar pode ver e comentar.

Pessoas com acesso

ASAna Souza
CPCarlos Pereira
JCJuliana Costa

Compartilhar com pessoasCard · Field · Input · Chip · Avatar · Button

19 resultados

Até R$ 400
Nota 4+
Cancelamento grátis

Filtros aplicadosChip · Button · Text

Boas práticas

FaçaDe uma a três palavras.

Rótulos curtos mantêm a fileira fácil de percorrer e cabem no celular.

EviteFrases dentro de chips.

Elas desmontam a fileira em linhas tortas e demoram mais para ler do que uma ou duas palavras.

FaçaChip filtra, botão age.

Pressionar um chip muda o que aparece; uma ação como "Exportar" continua sendo botão.

EviteChips como botões de ação.

Um chip anuncia "pressionado" ou "não pressionado", o que não faz sentido para "Excluir".

Props

PropriedadeTipoPadrãoDescrição

avatarReactNode—Aparece antes do texto, normalmente um Avatar pequeno.

onRemove(() => void)—Transforma o chip em chip de entrada (uma pessoa, um valor) com botão de remover, em vez de alternância. Sem ele, o chip é um filtro com check quando pressionado.

removeLabelstring—Nome acessível do botão de remover (traduzível); o padrão é "Remove {texto}".

pressedboolean—Se o chip está pressionado, quando você controla o estado.

defaultPressedbooleanfalseSe o chip começa pressionado, quando ele guarda o próprio estado.

disabledbooleanfalseDesativa o chip e o botão de remover.

onPressedChange(pressed, details) => void—Chamada quando o chip é pressionado ou despressionado.

valuestring—Identifica o chip dentro de um ChipGroup.

renderReactElement | (props, state) => ReactElement—Troca o elemento renderizado, mantendo o comportamento.

O ChipGroup recebe value, defaultValue e onValueChange (arrays com os valores dos chips), multiple (true por padrão), disabled e orientation. Dê um nome a ele com aria-label ou aria-labelledby.

Styling hooks

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio chip.

Atributos

data-slot"chip" · "chip-group" · "chip-check" · "chip-remove"

data-variantfilter · input

data-pressedpresente num chip de filtro pressionado

data-disabledpresente quando desativado

Tokens que ele lê

Cor

--cml-accent-text--cml-border--cml-fg--cml-fg-secondary--cml-focus-offset--cml-focus-ring--cml-focus-width--cml-surface-raised

Forma e tamanho

--cml-radius-pill

Tipografia e movimento

--cml-duration-fast--cml-ease-standard--cml-font-control--cml-font-weight-control

Só deste componente

--cml-chip-bg--cml-chip-border--cml-chip-fg--cml-chip-font-size--cml-chip-height--cml-chip-letter-spacing--cml-chip-on-fg--cml-chip-on-shadow--cml-chip-on-translate--cml-chip-radius--cml-chip-shadow--cml-chip-text-transform--cml-corner-shape--cml-disabled-opacity--cml-item-highlight

/* chips quadrados, só nesta barra */
.report-filters [data-slot="chip"] {
  --cml-chip-radius: var(--cml-radius-control);
}

Acessibilidade

TabLeva o foco para dentro do grupo, a um chip, e para fora. Num chip de entrada, chega ao botão de remover.

SetasMovem entre os chips de um ChipGroup.

Enter / SpacePressiona ou despressiona o chip focado, ou aciona o botão de remover.

Relacionados

ToggleBotão pressionado para barras de ferramentas, com ícones.Tags inputDigite para adicionar valores removíveis.CheckboxVárias opções num formulário, com rótulos.

Esta página foi útil? · Editar esta página no GitHub