Filter Chip

Pílula interativa para representar e alternar um valor de filtro pré-definido. Componentes `mk-filter-chip` e `mk-filter-chip-group`.

O mk-filter-chip representa um valor de filtro pré-definido que pode ser ativado ou desativado. Comunica visualmente e via ARIA se o filtro está aplicado. O mk-filter-chip-group reúne chips relacionados sob um rótulo com semântica de grupo.

Padrão

import { MkFilterChip } from '@db1/makuco-ui-react';

<MkFilterChip label="Pendentes" />

<mk-filter-chip label="Pendentes"></mk-filter-chip>

Com ícone

Quando leadingIcon está definido e o chip não está selecionado, o ícone aparece antes do texto. Ao selecionar, circle-check substitui o ícone fornecido — os dois nunca coexistem.

Quando nenhum leadingIcon é configurado e o chip se torna selecionado, o circle-check aparece e a largura do chip aumenta cerca de 20px. Em barras de filtro onde o deslocamento é indesejável, defina leadingIcon em todos os chips do grupo.

<MkFilterChip label="Pendentes" leadingIcon="funnel" />

<mk-filter-chip label="Pendentes" leading-icon="funnel"></mk-filter-chip>

Selecionado

O chip pode ser controlado externamente via a prop selected ou deixado no modo não controlado — ele muta internamente quando o usuário clica.

{/* controlado */}
<MkFilterChip label="Alta prioridade" selected={isActive} onMkChange={(e) => setIsActive(e.detail.selected)} />

{/* não controlado */}
<MkFilterChip label="Alta prioridade" />

<!-- controlado -->
<mk-filter-chip label="Alta prioridade" [selected]="isActive" (mkChange)="isActive = $event.detail.selected"></mk-filter-chip>

<!-- não controlado -->
<mk-filter-chip label="Alta prioridade"></mk-filter-chip>

Fechável

Quando closable é verdadeiro, um botão de fechar aparece após o texto. Clicar nele emite mkClose — o chip não é removido do DOM automaticamente; o consumidor remove da própria lista.

Em grupos com múltiplos chips fecháveis, defina closeLabel com um nome único por chip para atender WCAG 4.1.2.

<MkFilterChip
  label="Pendentes"
  closable
  closeLabel="Remover filtro Pendentes"
  onMkClose={(e) => removeFilter(e.detail.value)}
/>

<mk-filter-chip
  label="Pendentes"
  closable
  close-label="Remover filtro Pendentes"
  (mkClose)="removeFilter($event.detail.value)"
></mk-filter-chip>

Desabilitado

<MkFilterChip label="Pendentes" disabled />

<mk-filter-chip label="Pendentes" disabled></mk-filter-chip>

Grupo

O mk-filter-chip-group exibe um rótulo visível e agrupa chips semanticamente via role="group" e aria-labelledby.

import { MkFilterChip, MkFilterChipGroup } from '@db1/makuco-ui-react';

<MkFilterChipGroup label="Status">
  <MkFilterChip label="Ativo" value="ativo" />
  <MkFilterChip label="Pendente" value="pendente" />
  <MkFilterChip label="Inativo" value="inativo" />
</MkFilterChipGroup>

<mk-filter-chip-group label="Status">
  <mk-filter-chip label="Ativo" value="ativo"></mk-filter-chip>
  <mk-filter-chip label="Pendente" value="pendente"></mk-filter-chip>
  <mk-filter-chip label="Inativo" value="inativo"></mk-filter-chip>
</mk-filter-chip-group>

Props — mk-filter-chip

Prop	Tipo	Padrão	Descrição
`label`	`string`	—	Texto do chip. Quando ausente, o slot padrão é renderizado.
`leadingIcon`	`IconName`	—	Ícone antes do texto. Substituído por `circle-check` quando `selected`.
`value`	`string`	—	Identificador do recorte. Devolvido no payload de `mkChange` e `mkClose`.
`selected`	`boolean`	`false`	Se o filtro está aplicado. O chip muta internamente ao clicar e emite `mkChange`.
`closable`	`boolean`	`false`	Exibe botão de fechar.
`closeLabel`	`string`	`"Remove"`	Nome acessível do botão de fechar. Deve ser único por chip em grupos com múltiplos chips fecháveis.
`disabled`	`boolean`	`false`	Desabilita o toggle e o botão de fechar.

Props — mk-filter-chip-group

Prop	Tipo	Padrão	Descrição
`label`	`string`	—	Rótulo visível do grupo. Também o nome acessível via `aria-labelledby`.

Eventos

Evento	Componente	Payload	Descrição
`mkChange`	`mk-filter-chip`	`{ value?: string; selected: boolean }`	Emitido ao clicar no toggle. `selected` é o novo estado desejado. Não dispara quando `disabled`.
`mkClose`	`mk-filter-chip`	`{ value?: string }`	Emitido ao clicar no botão de fechar. Não emite `mkChange`. Não dispara quando `disabled`.

Slots

Componente	Slot	Descrição
`mk-filter-chip`	(padrão)	Conteúdo do rótulo quando `label` não é fornecido.
`mk-filter-chip-group`	(padrão)	Instâncias de `mk-filter-chip`.

Acessibilidade

O toggle usa aria-pressed para comunicar o estado de seleção. O botão de fechar requer closeLabel descritivo e único quando múltiplos chips aparecem no mesmo grupo — botões com o mesmo nome acessível violam WCAG 4.1.2.

O mk-filter-chip-group declara role="group" com aria-labelledby apontando para o rótulo visível, associando semanticamente os chips ao contexto do filtro.

Filter Chip

On this page