components

Toggle Switch

Toggle switches allow users to turn a setting on or off. They provide immediate visual feedback and are ideal for binary options like enabling or disabling features.

Import

import { ToggleSwitch } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Toggle a setting with immediate effect (e.g. enable/disable).
+Binary on/off preferences.
+When the change takes effect immediately without a save button.

When not to use

−For form fields submitted with a button — use InputCheckbox.
−For selecting from multiple options — use InputRadio or InputSelect.

Examples

Code Samples

Default

A basic toggle switch with a label and controlled state.

import { useState } from "react";
import { ToggleSwitch } from "@skedulo/breeze-ui-react";

export default function DefaultToggle() {
  const [checked, setChecked] = useState(false);

  return (
    <ToggleSwitch
      name="basic"
      label="Toggle me"
      checked={checked}
      onChange={() => setChecked(!checked)}
    />
  );
}

With Labels

Multiple toggle switches with descriptive labels for different settings.

import { useState } from "react";
import { ToggleSwitch } from "@skedulo/breeze-ui-react";

export default function LabelledToggles() {
  const [notifications, setNotifications] = useState(true);
  const [darkMode, setDarkMode] = useState(false);
  const [autoSave, setAutoSave] = useState(true);

  return (
    <div className="space-y-4">
      <ToggleSwitch
        name="notifications"
        label="Enable notifications"
        checked={notifications}
        onChange={() => setNotifications(!notifications)}
      />
      <ToggleSwitch
        name="darkMode"
        label="Dark mode"
        checked={darkMode}
        onChange={() => setDarkMode(!darkMode)}
      />
      <ToggleSwitch
        name="autoSave"
        label="Auto-save"
        checked={autoSave}
        onChange={() => setAutoSave(!autoSave)}
      />
    </div>
  );
}

With Switch Labels

A toggle switch with ON/OFF text labels displayed on the toggle track using switchOnLabel and switchOffLabel.

import { useState } from "react";
import { ToggleSwitch } from "@skedulo/breeze-ui-react";

export default function SwitchLabelsToggle() {
  const [checked, setChecked] = useState(false);

  return (
    <ToggleSwitch
      name="onOff"
      label="Power"
      switchOnLabel="ON"
      switchOffLabel="OFF"
      checked={checked}
      onChange={() => setChecked(!checked)}
    />
  );
}

Disabled

Disabled toggle switches in both the off and on states. They cannot be interacted with.

import { ToggleSwitch } from "@skedulo/breeze-ui-react";

export default function DisabledToggle() {
  return (
    <div className="space-y-4">
      <ToggleSwitch name="disabledOff" label="Disabled (off)" disabled />
      <ToggleSwitch name="disabledOn" label="Disabled (on)" checked disabled />
    </div>
  );
}

Left Label

A toggle switch with the label positioned to the left of the switch using the leftLabel prop.

import { useState } from "react";
import { ToggleSwitch } from "@skedulo/breeze-ui-react";

export default function LeftLabelToggle() {
  const [checked, setChecked] = useState(false);

  return (
    <ToggleSwitch
      name="leftLabel"
      label="Label on the left"
      leftLabel
      checked={checked}
      onChange={() => setChecked(!checked)}
    />
  );
}

Guidelines

Do

✓Label should describe the enabled state.
✓Place the toggle next to its label.
✓Use for settings that take effect immediately.

Don't

✗Don't use toggle for choices that need to be saved — use checkbox.
✗Don't use negative labels.

API Reference

Prop	Type	Default	Description
name*	string	—	The name attribute for the underlying input element, used for form identification.
label	string	—	A text label displayed next to the toggle switch.
checked	boolean	false	Whether the toggle is in the on state.
onChange	() => void	—	Callback fired when the toggle is clicked. Toggle the checked state in this handler.
disabled	boolean	false	Prevents user interaction and applies a disabled visual style.
switchOnLabel	string	—	Text displayed on the toggle track when checked (e.g. "ON").
switchOffLabel	string	—	Text displayed on the toggle track when unchecked (e.g. "OFF").
leftLabel	boolean	false	When true, positions the label text to the left of the toggle switch instead of the right.

Related Components

Input Checkbox Input Radio