A Toggle allows users to decide on a state of an object.
<form class="o-form">
<div class="o-form__item">
<div class="o-toggle is-checked">
<div class="o-toggle__button">
<input type="checkbox" id="toggle_basic" class="o-toggle__input" checked>
<label class="o-toggle__label" for="toggle_basic"></label>
</div>
</div>
</div>
</form>
<form class="o-form">
<div class="o-form__item">
<div class="o-toggle o-toggle--label">
<div class="o-toggle__button">
<input type="checkbox" id="toggle_with_label" class="o-toggle__input">
<label class="o-toggle__label" for="toggle_with_label">Label</label>
</div>
</div>
</div>
</form>
<form class="o-form">
<div class="o-form__item">
<div class="o-toggle o-toggle--label o-toggle--large is-checked">
<div class="o-toggle__button">
<input type="checkbox" id="toggle_large" class="o-toggle__input" checked>
<label class="o-toggle__label"></label>
</div>
<div>
<label class="o-toggle__text" for="toggle_large">Label</label>
<div class="o-toggle__value">On</div>
</div>
</div>
<div class="o-form__description">Description text</div>
</div>
</form>
<form class="o-form">
<div class="o-form__item">
<div class="o-toggle o-toggle--label o-toggle--large is-checked">
<div class="o-toggle__button">
<input type="checkbox" id="toggle_large_custom" class="o-toggle__input" checked>
<label class="o-toggle__label" for="toggle_large_custom"></label>
</div>
<div>
<label class="o-toggle__text" for="toggle_large_custom">Custom value</label>
<div class="o-toggle__value" data-enabled="Enabled" data-disabled="Disabled">
Enabled
</div>
</div>
</div>
<div class="o-form__description">Description text</div>
</div>
</form>
<form class="o-form">
<div class="o-form__item">
<div class="o-toggle o-toggle--color-{color}">
<div class="o-toggle__button">
<input type="checkbox" id="toggle_color" class="o-toggle__input">
<label class="o-toggle__label" for="toggle_color"></label>
</div>
</div>
</div>
</form>
Attribute | Description | Possible values | Type | Required | Default |
---|---|---|---|---|---|
label | To use it with label set .o-toggle--label class | o-toggle--label | String | - | - |
color | Set with .o-toggle--color-{color} class | See Colors page | String | - | - |
size | Set with .o-toggle--large class | large | String | - | - |
disabled | Set with .is-disabled on .o-toggle and put disabled to input | is-disabled | String | - | - |
data-enabled | Set with data attribute data-enabled="Custom enabled string" on .o-toggle__value | data-enabled | String | - | On |
data-disabled | Set with data attribute data-disabled="Custom disabled string" on .o-toggle__value | data-disabled | String | - | Off |