Toggle

Controlled boolean switch. Uses role="switch" for correct ARIA semantics and animates smoothly between states.

Preview

Push notificationsDark modeMarketing emailsDisabled toggle

Usage

jsx

import { Toggle } from '@/components/ui'
import { useState } from 'react'

function Example() {
  const [enabled, setEnabled] = useState(false)

  return (
    <Toggle
      class="text-sky-300">checked={enabled}
      class="text-sky-300">onChange={setEnabled}
      class="text-sky-300">label="Enable notifications"
    />
  )
}

Props

Prop	Type	Default	Description
checked*	boolean	—	Controlled state of the toggle.
onChange*	(value: boolean) => void	—	Called with the new boolean value.
label	string	—	Visible label next to the switch.
disabled	boolean	false	Prevents interaction.
size	'sm' \| 'md'	'md'	Controls switch dimensions.