Feedback
Switch
A collection of collapsible elements.
Elements
The component is composed of multiple elements:
switchthe wrapperswitch__labelthe text associated with the toggle (optionnal)switch__inputthe input, hiddenswitch__switchthe clickable elementswitch__togglethe round element that toggles to indicate if the switch is on or not
The for attribute of the label should have the same value as the id attribute of the input
<div class="switch">
<p class="text body switch__label">Switch</p>
<input class="switch__input" type="checkbox" name="switch" id="switch">
<label class="switch__switch" for="switch">
<div class="switch__toggle"></div>
</label>
</div>Switch
Properties
Add classes to the wrapper class to change the style of the component.
Disabled
Add this class to signal users the field is disabled. Include pallote.js file to your project to automatically add the disabled attribute.
class="switch switch--disabled"
Switch