🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Switch

A toggle switch component for controlling boolean states

Enabled

Installation

The Switch component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Switch component into your React component.

import { Switch } from 'reacui';

Basic Usage

The Switch component provides a toggle switch control to manage boolean states.

<Switch />

// With onChange handler
<Switch onChange={(checked) => console.log(checked)} />

Switch States

Switches can be in different states such as checked, unchecked, or disabled.

Unchecked

Checked

Disabled (Unchecked)

Disabled (Checked)

{/* Unchecked */}
<Switch checked={false} />

{/* Checked */}
<Switch checked={true} />

{/* Disabled (Unchecked) */}
<Switch checked={false} disabled />

{/* Disabled (Checked) */}
<Switch checked={true} disabled />

Switch Sizes

The Switch component comes in different sizes to fit your design.

Small

Medium (default)

Large

{/* Small */}
<Switch size="sm" checked={true} />

{/* Medium (default) */}
<Switch size="md" checked={true} />

{/* Large */}
<Switch size="lg" checked={true} />

With Label

Add labels to your switches to provide more context.

Daily digest

Get notified once a day with a summary of all activity.

Dark mode

Switch between light and dark theme.

<div className="flex items-center">
  <div className="flex h-5 items-center">
    <Switch id="comments" checked={true} />
  </div>
  <div className="ml-3 text-sm">
    <label htmlFor="comments" className="font-medium text-gray-700 dark:text-gray-300">
      Daily digest
    </label>
    <p className="text-gray-500 dark:text-gray-400">
      Get notified once a day with a summary of all activity.
    </p>
  </div>
</div>

<div className="flex items-center">
  <div className="flex h-5 items-center">
    <Switch id="darkMode" checked={false} />
  </div>
  <div className="ml-3 text-sm">
    <label htmlFor="darkMode" className="font-medium text-gray-700 dark:text-gray-300">
      Dark mode
    </label>
    <p className="text-gray-500 dark:text-gray-400">
      Switch between light and dark theme.
    </p>
  </div>
</div>

API Reference

The following props are available for the Switch component.

Prop	Type	Default	Description
checked	boolean	false	Whether the switch is checked
disabled	boolean	false	Whether the switch is disabled
size	enum	'md'	Size of the switch: 'sm', 'md', or 'lg'
onChange	function	-	Callback function that is triggered when the switch state changes
id	string	-	The id attribute of the switch