Toggle

A toggle turns a setting on or off.

#Default

Use a toggle for a setting that takes effect straight away.

import { Toggle } from '@wolf-rayet/react';

<Toggle label="Assign new conversations automatically" isChecked={off} onChange={() => setOff((v) => !v)} />

#Checked

A checked toggle shows the setting is on.

import { Toggle } from '@wolf-rayet/react';

<Toggle label="Notify me on escalation" isChecked={on} onChange={() => setOn((v) => !v)} />

#Disabled

Use a disabled toggle when the setting cannot be changed.

import { Toggle } from '@wolf-rayet/react';

<Toggle label="Managed by your admin" isChecked={false} isDisabled />
<Toggle label="Locked on by your admin" isChecked isDisabled />