Toggle

A specialized form input component that provides a toggle switch interface with customizable on/off states, labels, and styles.

Basic Toggle

Creates a standard toggle with default settings.

Preview Code
php
Options
The Toggle component supports various configuration options.
  • onLabel: Text for the on state label (default: "On")
  • offLabel: Text for the off state label (default: "Off")
  • onStyle: Bootstrap style for the on state (default: "primary")
  • offStyle: Bootstrap style for the off state (default: "secondary")
  • onValue: Value when toggle is on (optional)
  • offValue: Value when toggle is off (optional)
  • size: Size of the toggle (from ToggleSizeEnum)
  • style: Custom CSS class to append
  • width: Custom width in pixels
  • height: Custom height in pixels
  • tabindex: Tab index for keyboard navigation
  • tristate: Whether to support indeterminate state
  • checked: Whether the toggle is checked (inherited from Checkbox)
  • value: The value of the toggle (inherited from Checkbox)
Toggle Examples
Here are examples of different ways to use the toggle component.

Labeled Toggle

Creates a toggle with custom on/off labels.

Preview Code
php

Styled Toggle

Creates a toggle with specific Bootstrap styles for on/off states.

Preview Code
php

Sized Toggle

Creates a toggle with a specific size.

Preview Code
php

Full-featured Toggle

Creates a toggle with all available customizations.

Preview Code
php

API

The toggle component extends from the Checkbox class so it has all its methods available.

Common alternative names: Toggle Switch, Binary Switch, On/Off Switch, Toggle Button, Flip Switch, Slider Switch, Binary Toggle

Types: Basic Toggle, Labeled Toggle, Styled Toggle, Sized Toggle, Tristate Toggle, Value Toggle

Principles

Visual Feedback

Toggle switches provide immediate visual feedback through their sliding animation and color changes, making the current state clear to users.

Binary Clarity

The component's design emphasizes the binary nature of the choice, making it clear that there are only two possible states (or three with tristate).

Consistency

Maintains consistent styling and behavior while providing customization options for different use cases.

Anatomy

Toggle Anatomy
  1. Container

    2. Outer wrapper with toggle classes

  2. Input

    3. Hidden checkbox input element

  3. Toggle

    4. Visual sliding element

  4. Labels

    5. On/off state text indicators

  5. Track

    6. Background element that the toggle slides along

  6. Thumb

    7. The moving part of the toggle

Usage

Use toggles for:

  • Feature toggles
  • Settings options
  • Binary choices
  • On/off states
  • Enable/disable controls
  • Mode switches
  • Preference settings

Best Practices

  1. Use clear, concise labels that describe the action
  2. Choose appropriate styles for on/off states
  3. Consider the context when choosing between a toggle and other input types
  4. Use consistent styling across related toggles
  5. Ensure the toggle is large enough to be easily clickable
  6. Consider using tristate for options that can be partially enabled
  7. Provide meaningful values for on/off states when needed

Common Patterns

Settings Panels
  • User preferences
  • Feature flags
  • Notification settings
  • Privacy controls
  • Display options
Form Controls
  • Required field indicators
  • Form validation toggles
  • Auto-save controls
  • Advanced options
  • Batch operations
Interface Controls
  • Dark/light mode
  • Layout options
  • View preferences
  • Filter toggles
  • Sort options

Accessibility

  1. Ensure proper ARIA attributes are set
  2. Maintain keyboard navigation support
  3. Provide clear focus states
  4. Use appropriate color contrast
  5. Include descriptive labels
  6. Consider screen reader announcements
  7. Test with various assistive technologies