Toggle

Toggle switches are often used for settings or to show and hide UI. They utilize a slide animation to indicate switching between two opposing options.

Overview

Resources

Changelog

Source code

Storybook

Figma

Install

yarn add @camp/toggle

Props

Prop	Type	Default	Description
`checked`	`boolean`	—	Whether the toggle is checked.
`onClick`	`(checked: boolean) => void`	—	The callback function for when the toggle is checked.
`disabled`	`boolean`	`false`	Whether the toggle is disabled.
`ariaLabel`	`string`	—	The aria-label for the toggle - only needed if the toggle is standalone.
`label`	`string`	—	The label for the toggle.
`labelPosition`	`"right" \| "left"`	—	The position of the label.
`style` †	`CSSProperties`	—

Generated from @camp/toggle@7.14.0 source, ordered by production usage. * required. † standard HTML attribute — all native attributes are supported; only those with production usage are listed.

Upgrading to Next Gen

🎨 Updated Color Palette & Style Refresh: Aligned styling with our refreshed brand standards, delivering a modernized and cohesive look and feel.

🚀 Easier interface: Now separate from Checkbox and built using the switch role, Toggle is now more approachable and easier to implement.

Migration steps

Update import path: Replace the old Toggle/Checkbox imports with Toggle from @camp/toggle.
Update prop values

~~value~~: No more value prop since the value is always either on/off.
onClick: The Toggle is now a button under the hood, so the onClick prop can be used instead of onChange to handle the switch event.

Variations

Production Examples

More states from @camp/toggle's visual test stories, ranked by production usage. Variations already documented above are not repeated here.

Label Position

import { Toggle } from '@camp/toggle';
 
const defaultArgs = {
  label: 'Toggle',
};
 
<Toggle {...defaultArgs} labelPosition="left" />

Label Position Right

import { Toggle } from '@camp/toggle';
 
const defaultArgs = {
  label: 'Toggle',
};
 
<Toggle {...defaultArgs} labelPosition="right" />

Checked Disabled

import { Toggle } from '@camp/toggle';
 
const defaultArgs = {
  label: 'Toggle',
};
 
<Toggle {...defaultArgs} checked disabled />

Checked

import { Toggle } from '@camp/toggle';
 
const defaultArgs = {
  label: 'Toggle',
};
 
<Toggle {...defaultArgs} checked />

Disabled

import { Toggle } from '@camp/toggle';
 
const defaultArgs = {
  label: 'Toggle',
};
 
<Toggle {...defaultArgs} disabled />

Aria Label

import { Toggle } from '@camp/toggle';
 
const defaultArgs = {
  label: 'Toggle',
};
 
<Toggle {...defaultArgs} ariaLabel="Toggle" />

Accessibility

Aria-label

If a label is not provided, the aria-label prop is required to describe the Toggle.

Keyboard support

Unless disabled, the user can tab into the Toggle and use the space or enter key to toggle the switch.