Toggle

Overview

Toggle is the shared switch-style control for boolean on/off settings.

It wraps TogglePrimitive with:

• optional label text
• standard row layout
• size variants for standard and compact settings UIs

Use Toggle when the interaction is clearly a boolean state such as enabled/disabled, active/inactive, or show/hide.

Basic Usage

<Toggle
  label="Add Meeting Link?"
  checked={withMeetingLink}
  onChange={setWithMeetingLink}
/>

This is the common pattern used in forms and configuration panels.

Small Toggle

Use size="sm" inside denser panels and inline configuration rows.

<Toggle checked={isActive} onChange={onToggle} size="sm" />

This is the pattern used in CancellationPanel.tsx.

With react-hook-form

<Controller
  control={control}
  name="showBackgroundImage"
  render={({ field }) => (
    <Toggle checked={field.value} onChange={field.onChange} />
  )}
/>

Props

Toggle Primitive

TogglePrimitive is the low-level switch behind Toggle.

Use it directly only when you need a custom layout that should not use the standard Toggle wrapper.

<div className="flex items-center gap-3">
  <TogglePrimitive checked={enabled} onChange={setEnabled} />
  <span>Enabled</span>
</div>

Toggle composes:

• TogglePrimitive for switch behavior and accessibility
• Label for optional text

For ordinary forms and settings panels, use Toggle instead of TogglePrimitive directly.

Primitive props:

Brand Dashboard Usage

Representative usages:

Choosing Between Toggle, Checkbox, And Radio

• Use Toggle for a single on/off setting.
• Use Checkbox for selection lists, permissions, or multi-select membership.
• Use Radio when the user must choose one option from a set.

Guidelines

• Do use Toggle for immediate boolean settings
• Do use size="sm" in dense configuration UIs
• Do wire it through Controller in react-hook-form when the value is form state
• Do use TogglePrimitive only when you need custom switch layout with the same semantics
• Don't use Toggle for mutually exclusive option groups
• Don't use Toggle when a checkbox list communicates the intent more clearly