Toggle

Binary switch control for on/off states.

Import

import { Toggle } from 'asterui'

Examples

Basic Toggle

Simple toggle switch.

</>

import { Toggle } from 'asterui'

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

export default App

Sizes

Four sizes available for 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

Colors

Color variants for different contexts.

</>

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

Disabled

Non-interactive disabled toggles.

</>

import { Toggle, Space } from 'asterui'

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

export default App

Controlled

Toggle with controlled state.

</>

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

In Form

Toggle integrated with Form component using 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

Property	Description	Type	Default
checked	Controlled checked state	boolean	-
defaultChecked	Default checked state (uncontrolled)	boolean	false
onChange	Callback when toggle state changes	(e: ChangeEvent) => void	-
size	Toggle size	'xs' | 'sm' | 'md' | 'lg'	'md'
color	Toggle color	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
disabled	Disable the toggle	boolean	false
className	Additional CSS classes	string	-

Accessibility

• Uses native checkbox input for accessibility
• Supports keyboard activation with Space key
• Checked/unchecked state announced by screen readers
• Disabled state properly communicated