Toggle

Control de interruptor binario para estados activado/desactivado.

Importación

import { Toggle } from 'asterui'

Ejemplos

Toggle Básico

Interruptor toggle simple.

</>

import { Toggle } from 'asterui'

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

export default App

Tamaños

Cuatro tamaños disponibles para toggles.

</>

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

Colores

Variantes de color para diferentes contextos.

</>

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

Deshabilitado

Toggles deshabilitados no interactivos.

</>

import { Toggle, Space } from 'asterui'

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

export default App

Controlado

Toggle con estado controlado.

</>

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

En Formulario

Toggle integrado con componente Form usando 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

Propiedad	Descripción	Tipo	Predeterminado
checked	Estado marcado controlado	boolean	-
defaultChecked	Estado marcado predeterminado (no controlado)	boolean	false
onChange	Callback cuando cambia el estado del toggle	(e: ChangeEvent) => void	-
size	Tamaño del toggle	'xs' | 'sm' | 'md' | 'lg'	'md'
color	Color del toggle	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
disabled	Deshabilitar el toggle	boolean	false
className	Clases CSS adicionales	string	-

Accesibilidad

• Usa input checkbox nativo para accesibilidad
• Soporta activación por teclado con la tecla Space
• El estado marcado/desmarcado es anunciado por lectores de pantalla
• El estado deshabilitado se comunica correctamente