{% include '@bolt-components-switch-button/switch-button.twig' with {
label: 'This is the label for the switch button'
} only %}
kebab-case
.
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
attributes
|
A Drupal attributes object. Applies extra HTML attributes to this component's parent container. |
object
| — |
|
button_attributes
|
A Drupal attributes object. Applies extra HTML attributes to this component's <button> element. |
object
| — |
|
label
*
|
Render a label in front of the switch button. |
any
| — |
|
on
|
Controls the active state of the switch button. Sets button state to "on" by default. |
boolean
|
false
|
|
npm install @bolt/components-switch-button
label
prop can accept anything. For better control of text styling, pass the headline component into the label
prop.aria-checked
attribute.<label>
and the <button>
elements.{% include '@bolt-components-switch-button/switch-button.twig' with {
label: 'Toggle me',
attributes: {
class: 'js-target-the-switch-button-container'
},
} only %}
<label class="js-target-the-switch-button-container c-bolt-switch-button" for="bolt-switch-button-123">
<div class="c-bolt-switch-button__label">Toggle me</div>
<button class="c-bolt-switch-button__button" type="button" id="bolt-switch-button-123" role="switch" aria-checked="false">
<span class="c-bolt-switch-button__button-text c-bolt-switch-button__button-text--checked">on</span>
<span class="c-bolt-switch-button__button-text c-bolt-switch-button__button-text--unchecked ">off</span>
</button>
</label>
const switchButton = document.querySelector(
'.js-target-the-switch-button-container button[role="switch"]',
);
switchButton.addEventListener('click', e => {
const el = e.target;
const isChecked = el.getAttribute('aria-checked') === 'true';
el.setAttribute('aria-checked', isChecked ? false : true);
});