Resa Design System

Appearance

Checkboxes ​

v-0.0.0

Default ​

html
<fieldset class="fieldset">
    <div class="toggle">
        <input id="defaultToggleId-1" type="checkbox" name="checkboxDefault">
        <label for="defaultToggleId-1">
            <span class="labelText">Default toggle label</span>
            <span class="toggle__module">
                <span aria-hidden="true" class="toggle__toggler"></span>
            </span>
        </label>
    </div>
</fieldset>

Label right ​

html
<fieldset class="fieldset">
    <div class="toggle">
        <input id="defaultToggleId-1" type="checkbox" name="checkboxDefault">
        <label for="defaultToggleId-1">
            <span class="labelText labelText--right">Default toggle label</span>
            <span class="toggle__module">
                <span aria-hidden="true" class="toggle__toggler"></span>
            </span>
        </label>
    </div>
</fieldset>

Wide ​

html
<fieldset class="fieldset">
    <div class="toggle--wide">
        <input id="defaultToggleId" type="checkbox" name="checkboxDefault">
        <label for="defaultToggleId">
            <span class="labelText">Default toggle label</span>
            <span class="toggle__module">
                <span aria-hidden="true" class="toggle__toggler"></span>
            </span>
        </label>
    </div>
</fieldset>

Wide with description ​

Some description

html
<fieldset class="fieldset">
    <div class="toggle--wide">
        <input id="defaultToggleId" type="checkbox" name="checkboxDefault">
        <label for="defaultToggleId">
            <span class="labelText">Default toggle label</span>
            <span class="toggle__module">
                <span aria-hidden="true" class="toggle__toggler"></span>
            </span>
        </label>
    </div>
</fieldset>

Wide with state ​

html
<fieldset class="fieldset">
    <div class="toggle--wide">
        <input id="defaultToggleId" type="checkbox" name="checkboxDefault">
        <label for="defaultToggleId">
            <span class="labelText">Default checkbox label</span>
            <span class="toggle__module">
                <span aria-hidden="true" class="toggle__toggler"></span>
                <span class="toggle__description">
                    <span class="toggle__checked">
                        On
                    </span>
                    <span class="toggle__unchecked">
                        Off
                    </span>
                </span>
            </span>
        </label>
    </div>
</fieldset>

Without label ​

html
<fieldset class="fieldset">
    <div class="toggle noLabel">
        <input id="defaultToggleId" type="checkbox" name="checkboxDefault">
        <label for="defaultToggleId">
            <span class="labelText">Default toggle label</span>
            <span class="toggle__module">
                <span aria-hidden="true" class="toggle__toggler"></span>
            </span>
        </label>
    </div>
</fieldset>

Disabled ​

html
<fieldset class="fieldset">
    <div class="toggle">
        <input id="defaultToggleId" disabled type="checkbox" name="checkboxDefault">
        <label for="defaultToggleId">
            <span class="labelText">Default toggle label</span>
            <span class="toggle__module">
                <span aria-hidden="true" class="toggle__toggler"></span>
            </span>
        </label>
    </div>
</fieldset>

Disabled and checked ​

html
<fieldset class="fieldset">
    <div class="toggle">
        <input id="defaultToggleId" disabled checked type="checkbox" name="checkboxDefault">
        <label for="defaultToggleId">
            <span class="labelText">Default toggle label</span>
            <span class="toggle__module">
                <span aria-hidden="true" class="toggle__toggler"></span>
            </span>
        </label>
    </div>
</fieldset>

Use case ​

Do

  • Add a description if the label itself do not provide enought information about what the toggle do

Don't

  • Use a status when outside a wide toggle.