Switch – Once UI

The Switch component provides a toggle control for binary states, featuring a sliding animation when toggled. It's commonly used for enabling or disabling features and settings.

Switch

Enable notifications

Receive updates about new features and improvements

<Switch
  label="Enable notifications"
  description="Receive updates about new features and improvements"
  checked={isChecked}
  onToggle={() => setIsChecked(!isChecked)}
/>

State

Control the switch state with the checked prop.

State

Feature is currently disabled

const [isChecked, setIsChecked] = useState(false);

<Switch
  label={isChecked ? "Feature is now enabled" : "Feature is currently disabled"}
  checked={isChecked}
  onToggle={() => setIsChecked(!isChecked)}
/>

Loading

Show a loading spinner while an action is being processed.

Processing

const [isChecked, setIsChecked] = useState(false);
const [isLoading, setIsLoading] = useState(false);

const handleToggle = () => {
  setIsLoading(true);
  
  // Simulate API call with timeout
  setTimeout(() => {
    setIsChecked(!isChecked);
    setIsLoading(false);
  }, 1000);
};

<Switch
  label="Processing"
  checked={isChecked}
  loading={isLoading}
  onToggle={handleToggle}
/>

Disabled

Disable the switch to prevent user interaction.

Disabled

Disabled switch

<Switch
  label="Disabled switch"
  disabled
  checked={isChecked}
  onToggle={() => setIsChecked(!isChecked)}
/>

Reversed

Place the switch on the right side of the label.

Reversed

Align switch to the right

This places the switch after the label text

const [isChecked, setIsChecked] = useState(false);

<Switch
  label="Align switch to the right"
  description="This places the switch after the label text"
  reverse
  checked={isChecked}
  onToggle={() => setIsChecked(!isChecked)}
/>

API reference

Prop	Type	Default
style	React.CSSProperties	—
className	string	—
checkedrequired Whether it is on. Controlled — there is no uncontrolled mode.	boolean	—
loading Show a spinner in the track while something resolves.	boolean	false
name Form field name.	string	—
value Form field value.	string	—
disabled Block interaction.	boolean	—
reverse Put the label before the switch instead of after it.	boolean	false
ariaLabel Label for a switch with no visible one.	string	Toggle switch
onTogglerequired Called when it is flipped, by pointer or keyboard.	() => void	—
label	ReactNode	—
description	ReactNode	—
iconButtonProps Props forwarded to the icon button beside the label.	IconButtonProps	—
…and every React.InputHTMLAttributes prop	inherited	—