Tickster Styleguide

Appearance

Switch ​

When to use it ​

The Switch component is used for "switches", preferably where settings can be auto-saved. It provides a visual toggle between two states, such as on/off or active/inactive.

If you're not handling the click events in a JS component of your own, just add the data-switch attribute for interactivity. It uses functionality from components.switch.js, bundled in the framework JS file.

Variants ​

The Switch component works with buttons and checkboxes (if the <input> is nested within a <span>).

What it looks like ​

Code examples ​

html
<span class="c-switch" data-switch>
    <span class="c-switch__state c-switch__state--active">Aktiverad</span>
    <button type="button" class="c-switch__button c-switch__button--active" aria-checked="true" aria-role="switch">Inaktivera</button>
</span>
html
<span class="c-switch" data-switch>
    <span class="c-switch__state c-switch__state--inactive">Inaktiverad</span>
    <button type="button" class="c-switch__button c-switch__button--inactive" aria-checked="false" aria-role="switch">Aktivera</button>
</span>
html
<span class="c-switch" data-switch>
    <label for="switch3" class="c-switch__state c-switch__state--active c-switch__state--updated">Säljbar?</label>
    <span class="c-switch__button c-switch__button--active"><input type="checkbox" id="switch3" value="1" checked aria-role="switch" /></span>
</span>
html
<span class="c-switch" data-switch>
    <label for="switch1" class="c-switch__state c-switch__state--inactive">Inaktiverad</label>
    <span class="c-switch__button c-switch__button--inactive" data-toggle="switch-info-1"><input type="checkbox" id="switch1" value="0"  aria-role="switch"/></span>
</span>
<div class="c-box c-box--info c-box--small u-hidden" id="switch-info-1">Information</div>

Accessibility notes ​

The "switch" role indicates a type of checkbox that represents on/off values, as opposed to checked/unchecked values. Make sure to not forget it if using your own markup (see examples above). And, if using <button>'s, add aria-checked (true/false) attribute to the button as well.