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

On State

Disabled

Variants

The Switch supports two variants: default (blue when on) and neutral (monochrome). Both use a squircle shape.

Neutral Variant

The neutral variant uses monochrome colors and a squircle shape, ideal for subtle, less prominent toggles.

Neutral States

Sizes

Three sizes available: sm, base (default), and lg.

Custom ID

When a custom id is provided, clicking the label still toggles the switch. The id is forwarded to Base UI so the label's htmlFor stays in sync.

Switch Group

Group related switches with Switch.Group. Provides a shared legend, description, and error message for the group.

Visually Hidden Legend

Use Switch.Legend with className="sr-only" to keep the legend accessible to screen readers while hiding it visually. This is useful when the group is already labeled by a parent Field or heading, and showing the legend would create a redundant label.

Custom Legend Styling

Switch.Legend accepts className for full control over legend presentation. Use it instead of the legend string prop when you need custom typography, colors, or layout.

API Reference

Switch

Individual switch toggle with built-in label.

Switch.Group

Container for multiple switches with legend, description, and error support.

Switch.Legend

Composable legend sub-component for Switch.Group. Accepts className for full styling control (e.g. className="sr-only" to visually hide). Use instead of the legend string prop when you need custom legend styling.

Switch.Item

Individual switch within Switch.Group.