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
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();
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();
The Twig template file for the Switch component
{# 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>