Switch

Uncontrolled

Result

Loading...

Live Editor

<Switch label="Switch" defaultSelected />

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

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

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

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