Devie UI
Version: 2026-02-14

<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://devie-ui.com/components/switch
// https://base-ui.com/react/components/switch
 
import { Switch as BaseSwitch } from "@base-ui/react/switch";
import clsx from "clsx";
import styles from "./Switch.module.scss";
 
function Root({ className, ...props }: BaseSwitch.Root.Props) {
  return (
    <BaseSwitch.Root className={clsx(styles.root, className)} {...props} />
  );
}
 
function Thumb({ className, ...props }: BaseSwitch.Thumb.Props) {
  return (
    <BaseSwitch.Thumb className={clsx(styles.thumb, className)} {...props} />
  );
}
 
const Switch = {
  Root,
  Thumb,
};
 
namespace Switch {
  export namespace Root {
    export type Props = BaseSwitch.Root.Props;
    export type State = BaseSwitch.Root.State;
    export type ChangeEventDetails = BaseSwitch.Root.ChangeEventDetails;
  }
  export namespace Thumb {
    export type Props = BaseSwitch.Thumb.Props;
  }
}
 
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.