Filter

Un grupo de botones de radio para filtrado de opción única. Seleccionar una opción oculta las demás y muestra un botón de reinicio.

Importar

import { Filter } from 'asterui'

Ejemplos

Básico

Filtro simple con opciones de cadena. Haz clic en una opción para seleccionar, haz clic en reiniciar para limpiar.

</>

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

Tamaños

Variantes de tamaño disponibles.

</>

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

Opciones de Objeto

Usa objetos para opciones con etiquetas, valores y estado deshabilitado 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

Sin Botón de Reinicio

Oculta el botón de reinicio cuando quieras requerir una selección.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
options	Opciones de filtro	(string | FilterOption)[]	-
value	Valor seleccionado controlado	string	-
defaultValue	Valor predeterminado para modo no controlado	string	-
onChange	Llamado cuando cambia la selección	(value: string | undefined) => void	-
name	Nombre del grupo de radio (auto-generado si no se proporciona)	string	-
size	Tamaño del botón	'xs' | 'sm' | 'md' | 'lg'	'md'
showReset	Mostrar botón de reinicio	boolean	true
resetLabel	Etiqueta del botón de reinicio	React.ReactNode	'×'
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

FilterOption

Propiedad	Descripción	Tipo	Predeterminado
label	Texto de visualización para la opción	string	-
value	Valor de la opción	string	-
disabled	Si la opción está deshabilitada	boolean	false
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Usa entradas de radio nativas para soporte de teclado y lector de pantalla
• Las opciones usan aria-label para nombres accesibles
• El botón de reinicio tiene aria-label="Reset filter"
• Soporta navegación por teclado con Tab y Espacio/Enter