Toggle

Toggle switch for binary on/off settings.

Also known as: switch, toggle switch, on/off switch

View in Storybook

When to use

• Binary on/off settings where the effect is immediate (e.g. enable notifications). For form checkboxes that require submit, use Checkbox.
• For card-style toggles, use ToggleCard. For grouping multiple toggles, use ToggleGroup.

Import

import { Toggle } from '@vacano/ui'

Usage

const [enabled, setEnabled] = useState(false)

<Toggle
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
  label="Enable notifications"
/>

With Label

<Toggle checked={true} onChange={() => {}} label="Dark mode" />

Without Label

<Toggle checked={false} onChange={() => {}} />

Variants

<Toggle variant="normal" checked={true} onChange={() => {}} label="Normal" />
<Toggle variant="error" checked={true} onChange={() => {}} label="Error" />

Disabled

<Toggle disabled checked={true} onChange={() => {}} label="Disabled on" />
<Toggle disabled checked={false} onChange={() => {}} label="Disabled off" />

Props

Prop	Type	Default	Description
checked	boolean	required	Toggle state
onChange	ChangeEventHandler<HTMLInputElement>	required	Change handler
label	ReactNode	-	Label content (text or any renderable node)
variant	'normal' | 'error'	'normal'	Visual variant
disabled	boolean	false	Disable toggle
className	string	-	CSS class name for the root element
classnames	ToggleClassNames	-	Custom class names for inner elements
ref	Ref<HTMLInputElement>	-	Ref to the underlying input element
data-test-id	string	-	Test identifier attribute

All standard HTML input attributes are also supported (except type, checked, onChange, and className which are controlled by the component).

ClassNames

Key	Description
input	Hidden input element
track	Toggle track (background pill)
thumb	Toggle thumb (sliding circle)
label	Label text

Related

• Checkbox - Checkbox input
• ToggleCard - Card-style toggle with description
• ToggleGroup - Group of toggles