Switch - Kumo

Switch

<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

<Switch label="Switch" checked={false} onCheckedChange={() => {}} />

On State

Switch

<Switch label="Switch" checked={true} onCheckedChange={() => {}} />

API Reference

Prop	Type	Default	Description
variant	`"default" \| "error"`	`"default"`	Visual variant: "default" or "error" for validation failures (visual only, no error text)
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