Filter

Um grupo de botões de rádio para filtragem de opção única. Selecionar uma opção oculta as outras e mostra um botão de reset.

Importação

import { Filter } from 'asterui'

Exemplos

Básico

Filtro simples com opções de string. Clique em uma opção para selecionar, clique em reset para limpar.

</>

Selected: None

import { Filter, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState<string | undefined>()
  
  return (
      <Space direction="vertical" size="md">
        <Filter
          options={['Svelte', 'Vue', 'React', 'Angular']}
          value={value}
          onChange={setValue}
        />
        <p className="text-sm text-base-content/70">
          Selected: {value || 'None'}
        </p>
      </Space>
    )
}

export default App

Tamanhos

Variantes de tamanho disponíveis.

</>

import { Filter, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="lg">
        <Filter options={['Small', 'Medium', 'Large']} size="xs" />
        <Filter options={['Small', 'Medium', 'Large']} size="sm" />
        <Filter options={['Small', 'Medium', 'Large']} size="md" />
        <Filter options={['Small', 'Medium', 'Large']} size="lg" />
      </Space>
    )
}

export default App

Opções de Objeto

Use objetos para opções com rótulos, valores e estado desabilitado personalizados.

</>

Selected value: None

import { Filter, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState<string | undefined>()
  
  return (
      <Space direction="vertical" size="md">
        <Filter
          options={[
            { label: 'JavaScript', value: 'js' },
            { label: 'TypeScript', value: 'ts' },
            { label: 'Python', value: 'py' },
            { label: 'Rust', value: 'rust', disabled: true },
          ]}
          value={value}
          onChange={setValue}
        />
        <p className="text-sm text-base-content/70">
          Selected value: {value || 'None'}
        </p>
      </Space>
    )
}

export default App

Sem Botão de Reset

Oculte o botão de reset quando quiser exigir uma seleção.

</>

import { Filter } from 'asterui'

function App() {
  return (
      <Filter
        options={['Option A', 'Option B', 'Option C']}
        showReset={false}
        defaultValue="Option A"
      />
    )
}

export default App

API

Filter

Propriedade	Descrição	Tipo	Padrão
options	Opções de filtro	(string | FilterOption)[]	-
value	Valor selecionado controlado	string	-
defaultValue	Valor padrão para modo não controlado	string	-
onChange	Chamado quando a seleção muda	(value: string | undefined) => void	-
name	Nome do grupo de rádio (gerado automaticamente se não fornecido)	string	-
size	Tamanho do botão	'xs' | 'sm' | 'md' | 'lg'	'md'
showReset	Mostrar botão de reset	boolean	true
resetLabel	Rótulo do botão de reset	React.ReactNode	'×'
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

FilterOption

Propriedade	Descrição	Tipo	Padrão
label	Texto de exibição para a opção	string	-
value	Valor da opção	string	-
disabled	Se a opção está desabilitada	boolean	false
data-testid	ID de teste para testes	string	-

Acessibilidade

• Usa inputs de rádio nativos para suporte de teclado e leitor de tela
• Opções usam aria-label para nomes acessíveis
• Botão de reset tem aria-label="Reset filter"
• Suporta navegação por teclado com Tab e Space/Enter