Toggle

Import

import { Toggle } from 'tuimorphic';

Basic Usage

<Toggle label="Enable feature" />

Props

Prop	Type	Default	Description
`checked`	`boolean`	—	Whether the toggle is on (controlled)
`defaultChecked`	`boolean`	`false`	Default checked state (uncontrolled)
`onCheckedChange`	`(checked: boolean) => void`	—	Callback when state changes
`label`	`string`	—	Label text displayed next to toggle
`disabled`	`boolean`	`false`	Whether the toggle is disabled
`name`	`string`	—	Name attribute for forms
`className`	`string`	—	Additional CSS class names
`ref`	`React.Ref<HTMLButtonElement>`	—	Forwarded ref to the button element

With Label

Enable notifications

<Toggle label="Enable notifications" />

Disabled States

Disabled offDisabled on

<Toggle label="Disabled off" disabled />
<Toggle label="Disabled on" disabled checked />

Controlled Toggle

Dark mode

Status: Disabled

const [enabled, setEnabled] = useState(false);
 
<Toggle
  label="Dark mode"
  checked={enabled}
  onCheckedChange={setEnabled}
/>

Settings Panel Example

const [notifications, setNotifications] = useState(true);
const [sound, setSound] = useState(true);
const [autoSave, setAutoSave] = useState(false);
const [analytics, setAnalytics] = useState(false);
 
<div>
  <Toggle
    label="Push notifications"
    checked={notifications}
    onCheckedChange={setNotifications}
  />
  <Toggle
    label="Sound effects"
    checked={sound}
    onCheckedChange={setSound}
  />
  <Toggle
    label="Auto-save drafts"
    checked={autoSave}
    onCheckedChange={setAutoSave}
  />
  <Toggle
    label="Usage analytics"
    checked={analytics}
    onCheckedChange={setAnalytics}
  />
</div>

Interactive Example

This example shows how toggles can interact with each other:

const [airplaneMode, setAirplaneMode] = useState(false);
const [wifi, setWifi] = useState(true);
const [bluetooth, setBluetooth] = useState(false);
 
const handleAirplaneModeChange = (checked: boolean) => {
  setAirplaneMode(checked);
  if (checked) {
    setWifi(false);
    setBluetooth(false);
  }
};
 
<Toggle
  label="Airplane mode"
  checked={airplaneMode}
  onCheckedChange={handleAirplaneModeChange}
/>
<Toggle
  label="Wi-Fi"
  checked={wifi}
  onCheckedChange={setWifi}
  disabled={airplaneMode}
/>
<Toggle
  label="Bluetooth"
  checked={bluetooth}
  onCheckedChange={setBluetooth}
  disabled={airplaneMode}
/>

Key	Action
`Space`	Toggle state
`Enter`	Toggle state
`Tab`	Move focus to next element

Accessibility

Built on Base UI's accessible switch primitive
Proper ARIA attributes for screen readers
Keyboard accessible
Label properly associated with toggle

Styling

Variable	Description
`--theme-border`	Toggle border color
`--theme-button`	Toggle track background when on
`--theme-text`	Label color
`--theme-focused-border`	Border color when focused

Checkbox - For boolean selections with checkmark
Radio - For single selection from multiple options

Import

Basic Usage

Props

With Label

Disabled States

Controlled Toggle

Settings Panel Example

Interactive Example

Keyboard Navigation

Accessibility

Styling

On this page