Devie UI

<Switch />

The Switch component extends Base UI's Switch. It provides a toggle control for binary on/off states, commonly used for settings and preferences.

Installation

Here is the component implementation code that you can copy to your project:

// https://base-ui.com/react/components/switch
 
import { Switch as BaseSwitch } from "@base-ui-components/react/switch";
import clsx from "clsx";
import styles from "./Switch.module.scss";
 
interface SwitchRootProps extends BaseSwitch.Root.Props {
  className?: string;
}
 
function Root({ className, ...props }: SwitchRootProps) {
  return (
    <BaseSwitch.Root className={clsx(styles.root, className)} {...props} />
  );
}
 
interface SwitchThumbProps extends BaseSwitch.Thumb.Props {
  className?: string;
}
 
function Thumb({ className, ...props }: SwitchThumbProps) {
  return (
    <BaseSwitch.Thumb className={clsx(styles.thumb, className)} {...props} />
  );
}
 
const Switch = {
  Root,
  Thumb,
};
 
export default Switch;

Use Cases

Simple switch

A basic switch toggle. Use the defaultChecked prop for uncontrolled usage, or checked with onCheckedChange for controlled state management.

Disabled switch

Switches can be disabled using the disabled prop. When disabled, the switch is not interactive and shows a reduced visual state.