Switch

A binary on/off switch with an optional label. Built on Radix UI Switch, with smooth thumb animation and full keyboard accessibility. Renamed from Toggle in v0.3.0 to match the underlying Radix primitive.

Enable notifications

Label

Disabled

Usage

import { Switch } from "@bloomkit/react";
 
<Switch
  label="Enable notifications"
  onCheckedChange={(checked) => console.log(checked)}
/>

Controlled

const [enabled, setEnabled] = useState(false);
 
<Switch
  label="Dark mode"
  checked={enabled}
  onCheckedChange={setEnabled}
/>

Without label

<Switch
  aria-label="Toggle dark mode"
  onCheckedChange={(checked) => setDarkMode(checked)}
/>

Props

Prop	Type	Default	Description
label	string	—	Text label rendered alongside the switch
checked	boolean	—	Controlled checked state
defaultChecked	boolean	false	Initial checked state for uncontrolled usage
onCheckedChange	(checked: boolean) => void	—	Callback fired when the checked state changes
disabled	boolean	false	Prevent interaction with the switch
id	string	—	Used for label association (auto-generated if not provided)
className	string	—	Additional Tailwind classes applied to the switch root

PreviousSpinnerComponents

NextTabsComponents