Switch

Toggle switch for boolean settings. Uses native input[type=checkbox] under the hood.

With label and description

Email notificationsReceive digest emails every morning.

import { useState } from 'react'
import { Switch } from '@canarist/ui'

function Example() {
  const [enabled, setEnabled] = useState(true)
  return (
    <Switch
      label="Email notifications"
      description="Receive digest emails every morning."
      checked={enabled}
      onChange={(e) => setEnabled(e.target.checked)}
    />
  )
}

Sizes

SmallMedium (default)

<Switch label="Small" size="sm" checked={on} onChange={(e) => setOn(e.target.checked)} />
<Switch label="Medium" size="md" checked={on} onChange={(e) => setOn(e.target.checked)} />

Disabled

Disabled (on)

<Switch label="Disabled" checked disabled />

Reference

Prop	Type	Default	Description
label	string	—	Label shown next to the toggle.
description	string	—	Secondary text below the label.
size	'sm' \| 'md'	'md'	Physical size of the toggle.
checked	boolean	—	Controlled checked state.
onChange	React.ChangeEventHandler<HTMLInputElement>	—	Called when the switch is toggled. Use e.target.checked to read the new value.
disabled	boolean	—	Disable the switch.