<Toggle> is the on/off switch for boolean values. Supports labels, custom colors, permission gating, and a yielded block for inline content.

`<Toggle>`

A switch-style on/off input for boolean values. Used everywhere a single boolean flag needs to be set — settings panels, feature flags, "Online" / "Active" toggles.

Basic Usage

<Toggle @isToggled={{this.isOnline}} @onToggle={{fn (mut this.isOnline)}} />

With a Label

<Toggle
  @isToggled={{this.driver.online}}
  @label="Online"
  @onToggle={{fn (mut this.driver.online)}}
/>

The @label is rendered to the right of the switch.

Yielding a Custom Label

If you need the label to be rich (icon + text, custom markup), yield a block:

<Toggle @isToggled={{this.notify}} @onToggle={{fn (mut this.notify)}}>
  <FaIcon @icon="bell" class="mx-2" />
  <span class="text-sm">Email me on every order</span>
</Toggle>

Arguments

Argument	Type	Default	Description
`@isToggled`	boolean	`false`	The current toggle state
`@onToggle`	`(isToggled) => void`	—	Called with the new state when the user flips the switch
`@label`	string	—	Optional label rendered to the right of the switch
`@labelClass`	string	—	Extra classes on the label
`@activeColor`	string	`green`	Tailwind color name used for the on-state background — e.g. `green`, `blue`, `red`, `yellow`
`@disabled`	boolean	`false`	When true, clicks do nothing and the switch is dimmed
`@visible`	boolean	`true`	When false, nothing renders
`@permission`	string	—	If the current user lacks this ability, the toggle is auto-disabled and shows an "Unauthorized" tooltip
`@helpText`	string	—	Tooltip text shown next to the label
`@exampleText`	string	—	Optional example beneath the help text
`@icon`	string	`info-circle`	Icon shown next to the help-text trigger
`@iconClass`	string	—	Extra classes on the help icon
`@tooltipPlacement`	string	`right`	Tooltip placement — `top`, `bottom`, `left`, `right`
`@wrapperClass`	string	—	Extra classes on the outer wrapper

Different Color

Use @activeColor to change the on-state color — useful to convey severity:

<Toggle @isToggled={{this.danger}} @label="Demolition mode" @activeColor="red" @onToggle={{fn (mut this.danger)}} />
<Toggle @isToggled={{this.warn}}   @label="Warning mode"    @activeColor="yellow" @onToggle={{fn (mut this.warn)}} />
<Toggle @isToggled={{this.info}}   @label="Info mode"       @activeColor="blue" @onToggle={{fn (mut this.info)}} />

Permission Gating

<Toggle
  @isToggled={{this.feature.enabled}}
  @label="Enable feature flag"
  @permission="platform manage feature-flags"
  @onToggle={{fn (mut this.feature.enabled)}}
/>

If the current user can't manage feature flags, the switch is rendered disabled with an "Unauthorized" tooltip.

With Help Text

<Toggle
  @isToggled={{this.options.auto_dispatch}}
  @label="Auto-dispatch orders"
  @helpText="Orders are dispatched as soon as they are accepted, without manual intervention."
  @onToggle={{fn (mut this.options.auto_dispatch)}}
/>

Real-World Examples

{{!-- Driver online/offline --}}
<Toggle
  @isToggled={{this.driver.online}}
  @label="Online"
  @onToggle={{fn (mut this.driver.online)}}
/>

{{!-- Settings boolean with help text --}}
<Toggle
  @isToggled={{this.options.tax_enabled}}
  @label="Enable tax"
  @helpText="Apply a tax line item to checkouts. You'll be prompted for the tax percentage."
  @onToggle={{fn (mut this.options.tax_enabled)}}
/>

{{!-- Inside a form, paired with InputGroup --}}
<InputGroup>
  <Toggle
    @isToggled={{this.driver.email_notifications}}
    @label="Email notifications"
    @onToggle={{fn (mut this.driver.email_notifications)}}
  />
</InputGroup>

{{!-- Disabled toggle --}}
<Toggle @isToggled={{this.locked}} @label="Locked (admin only)" @disabled={{true}} />

Source

File	Description
`addon/components/toggle.hbs`	Template
`addon/components/toggle.js`	Class

Toggle

On this page