Skip to contentWolf-Rayet

Toggle

A toggle is used to view or switch between enabled or disabled states.

#Default

Use a toggle for a setting that takes effect immediately.

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

<Toggle label="Auto-assign new conversations" 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 />