Pattern library

Toggle

View full screen

Details

Source (Nunjucks)

<label class="toggle" for="{{ data.id }}">
<span class="toggle__label">{{ data.label }}</span>
<input type="checkbox" role="switch" class="toggle__element" id="{{ data.id }}" />
<div class="toggle__decor" aria-hidden="true">
<div class="toggle__thumb"></div>
</div>
</label>

Output

<label class="toggle" for="toggle_element">
<span class="toggle__label">A label for a toggle</span>
<input type="checkbox" role="switch" class="toggle__element" id="toggle_element" />
<div class="toggle__decor" aria-hidden="true">
<div class="toggle__thumb"></div>
</div>
</label>

Docs

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.