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"
		/>
	);
};

Colour

AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background the light palette variant is displayed.

This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA, 4:5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).

Light palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}>
	<Render>
	    {() => {
	    	const [isChecked, setChecked] = React.useState(false);
	    	return (
	    		<Switch
	    			checked={isChecked}
	    			label="Switch: on light background"
	    			onChange={setChecked}
	    		/>
	    	);
	    }}
	</Render>
</Box>

Dark palette

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<Render>
	    {() => {
	    	const [isChecked, setChecked] = React.useState(false);
	    	return (
	    		<Switch
	    			checked={isChecked}
	    			label="Switch: on dark background"
	    			onChange={setChecked}
	    		/>
	    	);
	    }}
	</Render>
</Box>

Related components

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