Interrupteur

Contrôle de commutation binaire pour les états activé/désactivé.

Importation

import { Toggle } from 'asterui'

Exemples

Interrupteur de base

Interrupteur simple.

</>

import { Toggle } from 'asterui'

function App() {
  return (
      <Toggle />
    )
}

export default App

Tailles

Quatre tailles disponibles pour les interrupteurs.

</>

import { Toggle, Space } from 'asterui'

function App() {
  return (
      <Space>
        <Toggle size="xs" defaultChecked />
        <Toggle size="sm" defaultChecked />
        <Toggle size="md" defaultChecked />
        <Toggle size="lg" defaultChecked />
      </Space>
    )
}

export default App

Couleurs

Variantes de couleurs pour différents contextes.

</>

import { Toggle, Space } from 'asterui'

function App() {
  return (
      <Space>
        <Toggle color="primary" defaultChecked />
        <Toggle color="secondary" defaultChecked />
        <Toggle color="accent" defaultChecked />
        <Toggle color="info" defaultChecked />
        <Toggle color="success" defaultChecked />
        <Toggle color="warning" defaultChecked />
        <Toggle color="error" defaultChecked />
      </Space>
    )
}

export default App

Désactivé

Interrupteurs désactivés non interactifs.

</>

import { Toggle, Space } from 'asterui'

function App() {
  return (
      <Space>
        <Toggle disabled />
        <Toggle disabled defaultChecked />
      </Space>
    )
}

export default App

Contrôlé

Interrupteur avec état contrôlé.

</>

Toggle is OFF

import { Toggle } from 'asterui'
import { useState } from 'react'

function App() {
  const [checked, setChecked] = useState(false)
  
  return (
      <div className="flex items-center gap-4">
        <Toggle checked={checked} onChange={(e) => setChecked(e.target.checked)} color="primary" />
        <span>Toggle is {checked ? 'ON' : 'OFF'}</span>
      </div>
    )
}

export default App

Dans un formulaire

Interrupteur intégré avec le composant Form utilisant valuePropName.

</>

Enable notifications

 

Dark mode

 

Save Settings

import { Toggle, Form, Button } from 'asterui'

function App() {
  const handleSubmit = (values: Record<string, unknown>) => {
    alert(JSON.stringify(values, null, 2))
  }
  
  return (
      <Form onFinish={handleSubmit} className="max-w-md">
        <Form.Item name="notifications" label="Enable notifications" valuePropName="checked">
          <Toggle color="primary" />
        </Form.Item>
  
        <Form.Item name="darkMode" label="Dark mode" valuePropName="checked">
          <Toggle color="secondary" />
        </Form.Item>
  
        <Form.Item>
          <Button htmlType="submit" color="primary">
            Save Settings
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

API

Toggle

Propriété	Description	Type	Défaut
checked	État coché contrôlé	boolean	-
defaultChecked	État coché par défaut (non contrôlé)	boolean	false
onChange	Callback lorsque l’état de l’interrupteur change	(e: ChangeEvent) => void	-
size	Taille de l’interrupteur	'xs' | 'sm' | 'md' | 'lg'	'md'
color	Couleur de l’interrupteur	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
disabled	Désactiver l’interrupteur	boolean	false
className	Classes CSS supplémentaires	string	-

Accessibilité

• Utilise une entrée de case à cocher native pour l’accessibilité
• Supporte l’activation au clavier avec la touche Espace
• L’état coché/non coché est annoncé par les lecteurs d’écran
• L’état désactivé est correctement communiqué