Toggle

Pair framework: Toggle

Pair\Html\FormControls\Toggle renders a switch-like checkbox control. Compared with Checkbox, it is more opinionated in markup because it already includes the wrapper label, the visual track, and the optional inline text.

This makes it especially useful for settings screens, feature flags, and modern forms where the visual language is closer to a switch than to a classic checkbox.

Main methods

Toggle defines:

• suppressLabel(bool $suppress = true): self
• render(): string

The rest comes from FormControl:

• label()
• labelClass()
• value()
• required()
• disabled()
• readonly()
• id()
• class()
• data()
• aria()
• description()
• validate()

Render structure

The generated markup is intentionally richer than a plain checkbox:

• wrapper <label class="toggle">
• internal <input type="checkbox" value="1">
• <span class="track" aria-hidden="true"></span>
• optional <span class="...">Label</span> unless suppressed

That means Toggle often renders as a self-contained component rather than a field plus a separate external label.

Most-used method: suppressLabel(...)

By default, Toggle prints the inline label text resolved by getLabelText().

If you need an icon-only or visually minimal switch, call suppressLabel().

$darkMode = (new \Pair\Html\FormControls\Toggle('darkMode'))
    // Hide the inline text while keeping the switch markup.
    ->suppressLabel(true)
    ->value(0)
    ->data('setting', 'dark-mode');

Rendering behavior

render():

• computes the checked state from the current truthy/falsy value
• wraps the whole control in <label class="toggle">
• prints the checkbox input with value="1"
• prints the visual track span
• prints the inline label span unless label suppression is enabled

Example:

$enabled = (new \Pair\Html\FormControls\Toggle('enabled'))
    // A toggle is a good fit for boolean settings with immediate meaning.
    ->label('Enabled')
    ->value(1);

echo $enabled->render();

Example with a custom label class:

$notifications = (new \Pair\Html\FormControls\Toggle('notifications'))
    ->label('Push notifications')
    // labelClass affects the inline text span rendered by Toggle.
    ->labelClass('toggle-text')
    ->value($user->notifications)
    ->class('js-notification-toggle');

Validation behavior

Unlike Checkbox, Toggle does not override validate().

So the current implementation uses the base FormControl::validate() method:

• required() is checked against the submitted POST value
• minLength() and maxLength() are technically available from the base class, although they are rarely useful here

This is an important difference from Checkbox, whose validate() always returns true.

Practical examples

1. Standard boolean preference

$enabled = (new \Pair\Html\FormControls\Toggle('enabled'))
    // Keep the switch synchronized with the current persisted value.
    ->label('Enabled')
    ->value($record->enabled);

2. Settings toggle with frontend hooks

$autoReply = (new \Pair\Html\FormControls\Toggle('autoReply'))
    ->label('Automatic reply')
    ->value($account->autoReply)
    // data-* attributes can drive conditional panels or AJAX saves.
    ->data('target', '#auto-reply-settings');

3. Inline toggle without visible text

$darkMode = (new \Pair\Html\FormControls\Toggle('darkMode'))
    ->value($preferences->darkMode)
    // Suppress the text when another visual label already exists nearby.
    ->suppressLabel();

4. Toggle with explicit id and description

$betaFeature = (new \Pair\Html\FormControls\Toggle('betaFeature'))
    // Explicit ids help when help text or JS targets the switch.
    ->id('beta-feature')
    ->label('Enable beta feature')
    ->description('This setting unlocks experimental UI paths.')
    ->value($user->betaFeature);

Secondary methods worth knowing

• labelClass(...) Here it affects the inline label span rendered inside the toggle component.
• renderLabel() Usually less useful than on other controls because Toggle already renders its own wrapper label.
• required() Supported through FormControl, unlike the more permissive Checkbox behavior.

Notes

• Toggle requires frontend CSS for classes such as toggle and track to look like a real switch.
• It is visually similar to Checkbox, but validation behavior is different because Toggle uses the base validator.
• If your design already provides a separate external label, suppressLabel() keeps the markup cleaner.

See also: Checkbox, FormControl, Button.