<Switch label="Switch" checked={false} onCheckedChange={() => {}} />Installation
Barrel
import { Switch } from "@cloudflare/kumo";Granular
import { Switch } from "@cloudflare/kumo/components/switch";Usage
import { Switch } from "@cloudflare/kumo";
import { useState } from "react";
export default function Example() {
const [checked, setChecked] = useState(false);
return (
<Switch
checked={checked}
onCheckedChange={(val) => setChecked(val)}
/>
);
}Examples
Off State
<Switch label="Switch" checked={false} onCheckedChange={() => {}} />On State
<Switch label="Switch" checked={true} onCheckedChange={() => {}} />Disabled
<Switch label="Disabled" checked={false} disabled />Variants
The Switch supports two variants: default (pill shape, blue when on) and neutral (squircle shape, monochrome).
<Switch label="Default variant" checked={true} onCheckedChange={() => {}} />
<Switch label="Neutral variant" variant="neutral" checked={true} onCheckedChange={() => {}} />Neutral Variant
The neutral variant uses monochrome colors and a squircle shape, ideal for subtle, less prominent toggles.
<Switch label="Neutral switch" variant="neutral" checked={checked} onCheckedChange={setChecked} />Neutral States
<Switch label="Neutral off" variant="neutral" checked={false} onCheckedChange={() => {}} />
<Switch label="Neutral on" variant="neutral" checked={true} onCheckedChange={() => {}} />
<Switch label="Neutral disabled" variant="neutral" checked={false} disabled />Sizes
Three sizes available: sm, base (default), and lg.
<Switch label="Small" size="sm" checked={true} onCheckedChange={() => {}} />
<Switch label="Base (default)" size="base" checked={true} onCheckedChange={() => {}} />
<Switch label="Large" size="lg" checked={true} onCheckedChange={() => {}} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "neutral" | "default" | Visual variant: "default" (pill, brand color) or "neutral" (squircle, monochrome) |
| label | ReactNode | - | Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes. |
| labelTooltip | ReactNode | - | Tooltip content to display next to the label via an info icon |
| required | boolean | - | Whether the switch is required. When explicitly false, shows "(optional)" text after the label. |
| controlFirst | boolean | - | When true (default), switch appears before label. When false, label appears before switch. |
| size | "sm" | "base" | "lg" | "base" | - |
| checked | boolean | - | - |
| disabled | boolean | - | - |
| transitioning | boolean | - | - |
| name | string | - | - |
| type | "submit" | "reset" | "button" | - | - |
| value | string | string[] | number | - | - |
| className | string | - | - |
| id | string | - | - |
| lang | string | - | - |
| title | string | - | - |
| onClick* | (event: React.MouseEvent) => void | - | Callback when switch is clicked |