Switch

import { ... } from '@ag.ds-next/react/switch';

() => {
	const [isChecked, setChecked] = React.useState(false);
	return (
		<Switch
			label="Show establishments"
			checked={isChecked}
			onChange={setChecked}
		/>
	);
};

A Switch allows a user to toggle a setting on or off, immediately affecting the user interface. Common use-cases include filtering interfaces and settings menus.

A Switch should not be used in Forms, or where a submit button is needed. Instead, a Checkbox or Radio component should be used.

Switch is a controlled component.

Do

• use to toggle settings with immediate effect
• always provide a meaningful label.

Don’t

• use as a Form Input – use a Checkbox
• change the colours or icon
• put the label anywhere but on the right of the Switch.

Size

Control size can be changed using the size prop.

() => {
	const [isChecked, setChecked] = React.useState(false);
	return (
		<Switch
			label="Small Switch"
			checked={isChecked}
			onChange={setChecked}
			size="sm"
		/>
	);
};

Related components

• Checkbox – Checkboxes allow users to select one or more options from a list.