Kumo

@cloudflare/kumo

Switch

A two-state button that can be either on or off.

<Switch toggled={false} onClick={() => {}} />

Installation

import { Switch } from "~/components/switch/switch";

Usage

import { Switch } from "~/components/switch/switch";
import { useState } from "react";

export default function Example() {
  const [toggled, setToggled] = useState(false);
  
  return (
    <Switch 
      toggled={toggled} 
      onClick={() => setToggled(!toggled)} 
    />
  );
}

Examples

Off State

<Switch toggled={false} onClick={() => {}} />

On State

<Switch toggled={true} onClick={() => {}} />

API Reference

PropTypeDefault
toggledbooleanfalse
onClick() => voidundefined