Filter

Un groupe de boutons radio pour le filtrage à option unique. La sélection d’une option masque les autres et affiche un bouton de réinitialisation.

Importation

import { Filter } from 'asterui'

Exemples

De base

Filtre simple avec options en chaîne. Cliquez sur une option pour sélectionner, cliquez sur réinitialiser pour effacer.

</>

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

Tailles

Variantes de taille 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

Options objets

Utiliser des objets pour les options avec étiquettes, valeurs personnalisées et état désactivé.

</>

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

Sans bouton de réinitialisation

Masquer le bouton de réinitialisation lorsque vous souhaitez exiger une sélection.

</>

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

Propriété	Description	Type	Défaut
options	Options de filtre	(string | FilterOption)[]	-
value	Valeur sélectionnée contrôlée	string	-
defaultValue	Valeur par défaut pour le mode non contrôlé	string	-
onChange	Appelé lors du changement de sélection	(value: string | undefined) => void	-
name	Nom du groupe radio (généré automatiquement si non fourni)	string	-
size	Taille du bouton	'xs' | 'sm' | 'md' | 'lg'	'md'
showReset	Afficher le bouton de réinitialisation	boolean	true
resetLabel	Étiquette du bouton de réinitialisation	React.ReactNode	'×'
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

FilterOption

Propriété	Description	Type	Défaut
label	Texte d’affichage pour l’option	string	-
value	Valeur de l’option	string	-
disabled	Si l’option est désactivée	boolean	false
data-testid	ID de test pour les tests	string	-

Accessibilité

• Utilise des entrées radio natives pour la prise en charge du clavier et du lecteur d’écran
• Les options utilisent aria-label pour les noms accessibles
• Le bouton de réinitialisation a aria-label="Reset filter"
• Prend en charge la navigation au clavier avec Tab et Espace/Entrée