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. onToggle receives the state the switch moves to, so the setter can be passed straight in.

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}
/>

Uncontrolled

Leave out checked and the switch keeps its own state, starting from defaultChecked. onToggle still reports every change, and with a name the switch submits its value with a form.

Uncontrolled

Email notifications

<Switch
  label="Email notifications"
  name="notifications"
  value="on"
  defaultChecked
/>

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

	Type	Default
style	React.CSSProperties	—
className	string	—
checked Whether it is on, controlled. Leave it out and the switch keeps its own state.	boolean	—
defaultChecked The starting state when `checked` is left out.	boolean	false
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
onToggle Called with the new state when it is flipped, by pointer or keyboard: true when it turns on.	(checked: boolean) => void	—
label	ReactNode	—
description	ReactNode	—
iconButtonProps Props forwarded to the icon button beside the label.	IconButtonProps	—
…and every React.InputHTMLAttributes prop	inherited	—