Switch

<Switch>Focus mode</Switch>

Installation

npx shadcn@latest add @dotui/switch

Usage

Use switch for communicating activation (e.g. on/off states), while checkboxes are best used for communicating selection (e.g. multiple table rows). Switches, unlike checkboxes, can't have an error state.

import { Switch } from "@/components/core/switch";

<Switch>Focus mode</Switch>;

import {
  SwitchIndicator,
  SwitchRoot,
  SwitchThumb,
} from "@/components/core/switch";

<SwitchRoot>
  <SwitchIndicator>
    <SwitchThumb />
  </SwitchIndicator>
  <span>Focus mode</span>
</SwitchRoot>;

Options

Variant

Use the variant prop to control the visual style of the switch.

import React from "react";

import { Switch } from "@dotui/registry/ui/switch";

export default function Demo() {
  return <Switch variant="card">Focus mode</Switch>;
}

Size

Use the size prop to control the size of the switch. The default variant is "md".

<Switch size="sm" />
<Switch size="md" />
<Switch size="lg" />

Label

A visual label can be provided using the component children or a hidden label using aria-label prop.

<Switch>Focus mode</Switch>
<Switch aria-label="Focus mode" />

Disabled

Use the isDisabled prop to disable the switch.

<Switch isDisabled>Focus Mode</Switch>

Uncontrolled

The defaultSelected prop can be used to set the default state.

<Switch defaultSelected>Airplane Mode</Switch>

Controlled

Use the isSelected and onChange props to control the value of the input.

const [isSelected, setSelected] = React.useState(true);
return (
  <Switch isSelected={isSelected} onChange={setSelected}>
    Airplane Mode
  </Switch>
)

Composition

If you need to customize things further, you can drop down to the composition level.

<SwitchRoot>
  <SwitchIndicator>
    <SwitchThumb />
  </SwitchIndicator>
</SwitchRoot>

API Reference

Accessibility

Keyboard interactions