Toggle

Controle de interruptor binário para estados ligado/desligado.

Importação

import { Toggle } from 'asterui'

Exemplos

Toggle Básico

Interruptor toggle simples.

</>

import { Toggle } from 'asterui'

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

export default App

Tamanhos

Quatro tamanhos disponíveis 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

Cores

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

Desabilitado

Toggles desabilitados não interativos.

</>

import { Toggle, Space } from 'asterui'

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

export default App

Controlado

Toggle com 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

Em Formulário

Toggle integrado com 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

Propriedade	Descrição	Tipo	Padrão
checked	Estado marcado controlado	boolean	-
defaultChecked	Estado marcado padrão (não controlado)	boolean	false
onChange	Callback quando estado do toggle muda	(e: ChangeEvent) => void	-
size	Tamanho do toggle	'xs' | 'sm' | 'md' | 'lg'	'md'
color	Cor do toggle	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
disabled	Desabilitar o toggle	boolean	false
className	Classes CSS adicionais	string	-

Acessibilidade

• Usa input checkbox nativo para acessibilidade
• Suporta ativação por teclado com tecla Space
• Estado marcado/desmarcado é anunciado por leitores de tela
• Estado desabilitado é comunicado corretamente