Toggle

Introduction

Toggle shares Checkbox’s boolean wire binding and validation surface, but renders as a switch. Use it for settings panels, feature flags, and anywhere an on/off metaphor reads clearer than a tick box. Pair toggles in Flex rows for compact preference lists.

Each variation below includes a short explanation, the fluent API to paste into your schema, and light/dark screenshots of the rendered control.

Basic toggle

Label beside a switch. Checked state dehydrates as True; unchecked as False.

Toggle.make('active')
    .label('Active account')

Orbit Basic toggle (light)

Orbit Basic toggle (dark)

On and off colors

.on_color() and .off_color() take Orbit color tokens (success, danger, warning, primary, and the rest of the panel palette) so the track communicates state beyond position alone.

Toggle.make('is_admin')
    .label('Administrator')
    .on_color('success')
    .off_color('danger')

Orbit On and off colors (light)

Orbit On and off colors (dark)

On and off icons

.on_icon() and .off_icon() place Heroicons inside the thumb for each state — useful when color alone is not enough (e.g. bolt vs user).

Toggle.make('is_admin')
    .label('Administrator')
    .on_icon('heroicon-m-bolt')
    .off_icon('heroicon-m-user')

Orbit On and off icons (light)

Orbit On and off icons (dark)

Inline label

Like Checkbox, toggles default to an adjacent label. .inline(False) stacks the label above the switch when aligning with other stacked fields.

Toggle.make('notifications')
    .label('Email notifications')
    .inline(False)

Orbit Inline label (light)

Orbit Inline label (dark)

Default value

.default(True) turns the switch on for new records before the user interacts. Combine with helper text when the default has side effects.

Toggle.make('newsletter')
    .label('Weekly newsletter')
    .default(True)
    .helper_text('You can change this later in settings.')

Orbit Default value (light)

Orbit Default value (dark)

Required and disabled

.required() demands the toggle be on; .disabled() freezes the control for audit or permission-gated views. Both APIs match Checkbox.

Toggle.make('tos')
    .label('I accept the terms')
    .required()

Toggle.make('locked_flag')
    .label('System flag')
    .disabled()

Orbit Required and disabled (light)

Orbit Required and disabled (dark)

Closures work on .label(), .helper_text(), .placeholder(), .visible(), .disabled(), and .required() where applicable — see Form closures.