Pular para o conteúdo
PrivateLab Design System

FilterField

Barra de filtros em linha única e o campo de largura natural que ela abriga.

A FilterBar organiza busca e filtros de uma lista em uma linha que quebra com elegância, e o FilterField é cada campo dentro dela, com largura natural de 9 a 13 rem. As duas peças existem porque o catálogo do HeroUI não tem uma barra de filtros. O layout reage à largura do próprio bloco (container query), não da janela: o menu lateral aberto também estreita o conteúdo.

import { FilterBar, FilterField } from "@rastreio-x/ui";

Padrão

A FilterBar leva aria-label e o papel search. Cada controle entra em um FilterField; grow faz o campo ocupar o espaço que sobrar, como a busca.

Com seletores

Vários filtros lado a lado, cada um com Label e largura natural. Em barras estreitas eles passam a duas colunas.

A barra da lista de Pedidos

Visão (Segment), busca que cresce e filtros em uma segunda barra. A lista de Pedidos separa busca e filtros em duas FilterBar, para a segunda poder virar um painel em telas pequenas.

Bloco estreito

Em um contêiner de 320 px a busca ocupa a linha inteira e os demais campos dividem duas colunas. A decisão vem do bloco, então vale também com o menu lateral aberto.

Anatomia

FilterBar            role="search", aria-label
├── FilterField      largura natural (13 rem)
├── FilterField grow cresce (busca)
└── FilterField      …
  • FilterBar: contêiner flex que quebra em linhas e declara o container rx-fb.
  • FilterField: item com flex: 0 1 13rem e min-width: 9rem; com grow, flex: 1 1 16rem.
  • Abaixo de 40 rem de largura do bloco, cada campo ocupa metade da linha e o grow a linha inteira.

Propriedades

Barra (FilterBar):

Campo (FilterField):

Animações

A barra não anima: os campos mudam de largura por container query, sem transição. Os controles dentro (Select, SearchField) têm as suas próprias transições curtas, reduzidas a 0,01 ms por prefers-reduced-motion pela folha global da fachada.

Acessibilidade

  • A FilterBar tem role="search" e aria-label, e vira uma região navegável por leitores de tela.
  • Duas barras na mesma tela precisam de rótulos diferentes (Buscar e filtrar Pedidos e Filtros).
  • A ordem do DOM é a ordem de tabulação: busca primeiro, depois filtros.
  • Cada controle mantém o seu próprio rótulo; o FilterField é só layout e não muda a semântica.
  • Ao filtrar, anuncie o novo total em uma região aria-live da lista.

Boas práticas

Faça

Busca em um `FilterField grow`, filtros de largura natural e um `aria-label` por barra.

Evite

Larguras fixas em pixels nos campos, ou uma barra com mais de cinco ou seis filtros.
  • Em telas estreitas, mostre Filtros · 2 ativos num botão que abre um painel, como a lista de Pedidos.
  • Mostre os filtros ativos como chips removíveis perto da lista.
  • Mantenha os filtros na URL para a tela ser compartilhável.
  • Use variant="secondary" nos campos quando a barra ficar sobre uma superfície.

Relacionados