Toggle

Toggles switch a single setting between on and off states. Use them for binary choices that take effect immediately.

Interactive preview

Toggle the switch and adjust options.

Label

Disabled

Enable feature

Checked: false

Props

Prop	Type	Default	Description
label	string	—	Text displayed beside the toggle.
checked	boolean	—	Controlled checked state.
defaultChecked	boolean	—	Initial state for uncontrolled usage.
disabled	boolean	false	Disables interaction.
name	string	—	Form field name, also used as fallback id.
className	string	""	Additional Tailwind classes for the wrapper.
...props	InputHTMLAttributes<HTMLInputElement>	—	Standard input attributes (aria-label, onChange, etc.).

Installation

Install packages

pnpm add @akanaka-design/components @akanaka-design/tokens

Styles (app root)

import "@akanaka-design/tokens/css";
import "@akanaka-design/components/styles.css";

Usage

Basic usage

import { Toggle } from "@akanaka-design/components";

export function Example() {
  const [enabled, setEnabled] = useState(false);
  
  return (
    <Toggle 
      label="Enable notifications"
      checked={enabled}
      onChange={(e) => setEnabled(e.target.checked)}
    />
  );
}

Without label

When the context is clear, use aria-label for accessibility:

Without label

<Toggle 
  checked={darkMode} 
  onChange={(e) => setDarkMode(e.target.checked)}
  aria-label="Toggle dark mode"
/>

Disabled states

<Toggle label="Available setting" checked />
<Toggle label="Unavailable setting" disabled />
<Toggle label="Locked on" checked disabled />

Settings layout

A common pattern for settings pages:

Settings layout

<div className="space-y-4">
  <div className="flex items-center justify-between">
    <div>
      <p className="font-medium text-neutral-900">Email notifications</p>
      <p className="text-body-sm text-neutral-500">Receive updates via email</p>
    </div>
    <Toggle checked={email} onChange={(e) => setEmail(e.target.checked)} />
  </div>
  <div className="flex items-center justify-between">
    <div>
      <p className="font-medium text-neutral-900">Push notifications</p>
      <p className="text-body-sm text-neutral-500">Receive push alerts on your device</p>
    </div>
    <Toggle checked={push} onChange={(e) => setPush(e.target.checked)} />
  </div>
</div>

Guidelines

When to use

Instant on/off settings (dark mode, notifications)
Feature flags or preferences
Binary choices that apply immediately

When not to use

Form submissions — use a checkbox with a submit button
Multiple related options — use checkboxes
Choices that need confirmation — use a checkbox + save button

Content

Use positive, action-oriented labels ("Enable X" not "Disable X")
Keep labels concise
Place the toggle on the right when paired with descriptive text