ToggleSwitch - Primer


import {ToggleSwitch} from '@primer/react-brand'

Examples

defaultChecked sets the initial value. onChange receives the next boolean value, not a native change event.

Name	Type	Default	Description
`checked`	`boolean`		Controlled on/off value.
`defaultChecked`	`boolean`	`false`	Initial uncontrolled value.
`onChange`	`(checked: boolean) => void`		Called once per accepted activation with the next value.
`onClick`	`React.MouseEventHandler<HTMLButtonElement>`		Activation callback receiving the button event.
`disabled`	`boolean`	`false`	Blocks activation while retaining keyboard focusability.
`loading`	`boolean`	`false`	Displays pending feedback and exposes `aria-busy` without blocking interaction.
`size`	`'small' \| 'medium'`	`'medium'`	Alternative sizes.
`loadingLabel`	`string`	`'Loading'`	Localized loading announcement.
`loadingLabelDelay`	`number`	`2000`	Announcement delay in milliseconds.
`spinnerPosition`	`'start' \| 'end'`	`'end'`	Indicator placement beside the switch when no visible FormControl label is available.
`aria-label`	`string`		Explicit accessible name matching equivalent visible labeling.
`aria-labelledby`	`string`		IDs of visible labeling elements.
`aria-describedby`	`string`		Description IDs, combined with FormControl and loading descriptions.
`aria-invalid`	React ARIA attribute		Validation state of the switch button.
`ref`	`React.Ref<HTMLButtonElement>`		Ref for the focusable button.
`className`	`string`		Class applied to the component wrapper.
`data-testid`	`string`		Test ID applied to the component wrapper.

Other standard button attributes, including aria-controls, tabIndex, keyboard handlers, and style, apply to the switch button.