Switch Toggle

A specialized toggle switch component that extends the Checkbox functionality, providing a modern, visually appealing way to represent binary choices.

Basic Switch Toggle

Creates a standard switch toggle with a name and label.

Preview Code
php
Options
The Switch component supports various configuration options.
  • bsStyle: Bootstrap style for the switch (default: 'primary')
  • size: Size of the switch (from SwitchSizeEnum)
  • alignRight: Whether to align the switch to the right (default: false)
  • checked: Whether the switch is checked (inherited from Checkbox)
  • disabled: Whether the switch is disabled (inherited from Checkbox)
  • required: Whether the switch is required (inherited from Checkbox)
  • value: The value of the switch when checked (inherited from Checkbox)
Switch Examples
Here are examples of different ways to use the switch component.

Styled Switch

Creates a switch with custom Bootstrap styling.

Preview Code
php

Sized Switch

Creates a switch with custom size.

Preview Code
php

Full-featured Switch

Creates a switch with all available customizations.

Preview Code
php

API

The switch 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 Switch, Styled Switch, Sized Switch, Right-aligned Switch, Required Switch, Disabled Switch, Checked Switch

Principles

Visual Feedback

Switch toggles 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.

Accessibility

Switch toggles maintain keyboard accessibility and screen reader compatibility while providing a modern visual interface.

Anatomy

Switch Anatomy
  1. Container

    2. Outer wrapper div with 'form-switch' class

  2. Input

    3. Hidden checkbox input element

  3. Toggle

    4. Visual sliding element

  4. Label

    5. Text description of the switch's purpose

  5. Track

    6. Background element that the toggle slides along

  6. Thumb

    7. The moving part of the switch

Usage

Use switch 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. Consider the visual hierarchy when placing multiple switches
  3. Use appropriate styling to indicate the importance of the switch
  4. Provide immediate feedback when the switch is toggled
  5. Consider the context when choosing between a switch and other input types
  6. Use consistent styling across related switches
  7. Ensure the switch is large enough to be easily clickable

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