Form Switch Component Documentation

 Switch Component
   - id: string - ID for the switch input (required)
   - name: string - Name for the switch input (required)
   - label: string - Label text (required)
   - checked: bool - Whether the switch is checked (optional)
   - disabled: bool - Whether the switch is disabled (optional)
   - class: string - Additional CSS classes (optional)

All available options for the Switch component

All available options for the Switch component


    ThemedComponent::make("form/switch")
	->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
	->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
	->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->checked('value') //bool - Whether the switch is checked (optional)
	->class('value') //string - Additional CSS classes (optional)
	->disabled('value') //bool - Whether the switch is disabled (optional)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->label('value') //string - Label text (required)
	->name('value') //string - Name for the switch input (required)
	->render();

Basic Switches

Default, checked, and disabled switch examples

// Default switch
echo ThemedComponent::make('form/switch')
    ->id('switchCheckDefault')
    ->name('switchCheckDefault')
    ->label('Default switch checkbox input')
    ->render();

// Checked switch
echo ThemedComponent::make('form/switch')
    ->id('switchCheckChecked')
    ->name('switchCheckChecked')
    ->label('Checked switch checkbox input')
    ->checked(true)
    ->render();

// Disabled switch
echo ThemedComponent::make('form/switch')
    ->id('switchCheckDisabled')
    ->name('switchCheckDisabled')
    ->label('Disabled switch checkbox input')
    ->disabled(true)
    ->render();

// Disabled checked switch
echo ThemedComponent::make('form/switch')
    ->id('switchCheckCheckedDisabled')
    ->name('switchCheckCheckedDisabled')
    ->label('Disabled checked switch checkbox input')
    ->checked(true)
    ->disabled(true)
    ->render();

Switch component template

The Twig template file for the Switch component

Content of the switch.twig file
{# Switch Component
   - id: string - ID for the switch input (required)
   - name: string - Name for the switch input (required)
   - label: string - Label text (required)
   - checked: bool - Whether the switch is checked (optional)
   - disabled: bool - Whether the switch is disabled (optional)
   - class: string - Additional CSS classes (optional)
#}
<div class="form-check form-switch {{ content.class|default('') }}">
    <input class="form-check-input" 
           type="checkbox" 
           role="switch" 
           id="{{ content.id }}" 
           name="{{ content.name }}"
           {% if content.checked %}checked{% endif %}
           {% if content.disabled %}disabled{% endif %}>
    <label class="form-check-label" for="{{ content.id }}">{{ content.label }}</label>
</div>