Switch

Toggle between two states.

Documentation: React Aria
Pattern: W3C ARIA
Source: GitHub
Issues: Report

Switch example

import { Switch } from "@/shim-ui/switch";

export default () => <Switch>On</Switch>;

Install

Use the CLI or copy the source code manually.

Command

Source code

pnpm dlx @kkga/shim add switch

States

Set the initial value with defaultSelected and disable the control with isDisabled.

Selected

Disabled

Selected and disabled

States example

import { Switch } from "@/shim-ui/switch";

export default () => (
  <>
    <Switch defaultSelected>Selected</Switch>
    <Switch isDisabled>Disabled</Switch>
    <Switch isDisabled isSelected>
      Selected and disabled
    </Switch>
  </>
);

Variant example

import { Switch } from "@/shim-ui/switch";

export default () => (
  <div className="grid grid-cols-3 items-center gap-2 self-start">
    <Switch variant="classic" />
    <Switch defaultSelected variant="classic" />
    <span>Classic</span>
    <Switch variant="soft" />
    <Switch defaultSelected variant="soft" />
    <span>Soft</span>
    <Switch variant="outline" />
    <Switch defaultSelected variant="outline" />
    <span>Outline</span>
  </div>
);

Label position

Use labelPosition to move the label beside or above the switch.

Start

End

Label position example

import { Switch } from "@/shim-ui/switch";

export default () => (
  <>
    <Switch labelPosition="start">Start</Switch>
    <Switch labelPosition="end">End</Switch>
  </>
);

Size

Adjust the size prop to change thumb and track dimensions.

Size 1

Size 2

Size 3

Size 4

Size example

import { Switch } from "@/shim-ui/switch";

export default () => (
  <>
    <Switch size={1}>Size 1</Switch>
    <Switch size={2}>Size 2</Switch>
    <Switch size={3}>Size 3</Switch>
    <Switch size={4}>Size 4</Switch>
  </>
);

Controlled

Manage state explicitly with isSelected andonChange.

Switch is off

Controlled example

"use client";
import { useState } from "react";
import { Switch } from "@/shim-ui/switch";

export default () => {
  const [isOn, setIsOn] = useState(false);
  return (
    <>
      <Switch isSelected={isOn} onChange={setIsOn}>
        On
      </Switch>
      <p>
        Switch is <strong>{isOn ? "on" : "off"}</strong>
      </p>
    </>
  );
};