Skip to main content

Switch

Uncontrolled​

Result
Loading...
Live Editor
<Switch label="Switch" defaultSelected />

Controlled​

Result
Loading...
Live Editor
function Example() {
	const [isSelected, setIsSelected] = React.useState(false);

	return <Switch label="Switch" isSelected={isSelected} onChange={setIsSelected} />;
}

Description​

Result
Loading...
Live Editor
<Switch label="Switch" description="Switch description" />

Sizes​

Result
Loading...
Live Editor
<>
	<Switch label="Small" size="sm" />
	<Switch label="Medium" size="md" />
	<Switch label="Large" size="lg" />
	<Switch label="Extra Large" size="xl" />
</>

States​

Result
Loading...
Live Editor
<>
	<Switch label="Valid Switch" isValid validText="Valid text" />
	<Switch label="Error Switch" isInvalid errorText="Error text" />
	<Switch label="Warning Switch" isWarning warningText="Warning Text" />
	<Switch label="Edited Switch" isEdited editedText="Edited Text" />
</>

Light​

Used when the switch is on a dark background

Result
Loading...
Live Editor
<div className="p-3 bg-primary">
	<Switch label="Switch" light description="Switch description" />
</div>

Analytics​

The Switch component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'Switch',
	actions: {
		onChange: { type: 'SWITCH_CHANGE', payload: 'Change' },
	},
};

Props​