Checkboxes

v-0.0.0

Classic

Default

Default checkbox label

<fieldset class="fieldset">
    <div class="checkbox">
        <input id="defaultCheckboxId" type="checkbox" name="checkboxDefault">
        <label for="defaultCheckboxId">
            <span class="labelText">Default checkbox label</span>
        </label>
    </div>
</fieldset>

Without lable

Checkbox hidden label

<fieldset class="fieldset">
    <div class="checkbox noLabel">
        <input id="noLabelCheckboxId" type="checkbox" name="checkboxNoLabel">
        <label for="noLabelCheckboxId">
            <span class="labelText">Checkbox hidden label</span>
        </label>
    </div>
</fieldset>

Error

Disabled label

Un message d'erreur

<fieldset class="fieldset notValid">
    <div class="checkbox">
        <input id="disabledCheckboxId" type="checkbox" name="checkboxDisabled">
        <label for="disabledCheckboxId">
            <span class="labelText">Disabled label</span>
        </label>
    </div>
    <p class="feedback--error">Un message d'erreur</p>
</fieldset>

Disabled

Disabled label

Disabled checked label

<fieldset class="fieldset">
    <div class="checkbox">
        <input disabled id="disabledCheckboxId" type="checkbox" name="checkboxDisabled">
        <label for="disabledCheckboxId">
            <span class="labelText">Disabled label</span>
        </label>
    </div>
</fieldset>

Long label

Ceci est un label de checkbox qui prend plusieurs lignes pour démontrer comment le texte long est géré dans l'interface utilisateur

<fieldset class="fieldset">
    <div class="checkbox">
        <input id="longLabelCheckboxId" type="checkbox" name="checkboxLongLabel">
        <label for="longLabelCheckboxId">
            <span class="labelText">Ceci est un label de checkbox qui prend plusieurs lignes pour démontrer comment le texte long est géré dans l'interface utilisateur</span>
        </label>
    </div>
</fieldset>

Button

Default

Btn checkbox label

<fieldset class="fieldset">
    <div class="checkbox--btn">
        <input id="buttonCheckboxId" type="checkbox" name="checkboxBtn">
        <label for="buttonCheckboxId">
            <span class="labelText">Btn checkbox label</span>
        </label>
    </div>
</fieldset>

With icon

Checkbox with icon label

<fieldset class="fieldset">
    <div class="checkbox--btn icon--thumbUp">
        <input id="checkboxIconId" type="checkbox" name="checkboxDefault">
        <label for="checkboxIconId">
            <span class="labelText">Checkbox with icon label</span>
        </label>
    </div>
</fieldset>

Error

Btn Error label

Un message d'erreur

Checkbox with icon label

Un message d'erreur

<fieldset class="fieldset notValid">
    <div class="checkbox--btn">
        <input id="btnDesabledCheckboxId" type="checkbox" name="checkboxBtnError">
        <label for="btnDesabledCheckboxId">
            <span class="labelText">Btn Error label</span>
        </label>
    </div>
    <p class="feedback--error">Un message d'erreur</p>
</fieldset>

Disabled

Btn disabled label

Btn disabled label

Checkbox with icon label

<fieldset class="fieldset">
    <div class="checkbox--btn">
        <input disabled id="btnDesabledCheckboxId" type="checkbox" name="checkboxBtnDisabled">
        <label for="btnDesabledCheckboxId">
            <span class="labelText">Btn disabled label</span>
        </label>
    </div>
</fieldset>

Grouped

Default

Label

Default checkbox label

Default checkbox label

Default checkbox label

Default checkbox label

Default checkbox label

<fieldset class="fieldset fieldset-group">
    <legend>Label</legend>
    <div class="checkbox">
        <input id="groupedCheckboxID1" type="checkbox" name="groupedCheckboxID1">
        <label for="groupedCheckboxID1">
            <span class="labelText">Default checkbox label</span>
        </label>
    </div>
    <div class="checkbox">
        <input id="groupedCheckboxID2" type="checkbox" name="groupedCheckboxID2">
        <label for="groupedCheckboxID2">
            <span class="labelText">Default checkbox label</span>
        </label>
    </div>
    <div class="checkbox">
        <input id="groupedCheckboxID3" type="checkbox" name="groupedCheckboxID3">
        <label for="groupedCheckboxID3">
            <span class="labelText">Default checkbox label</span>
        </label>
    </div>
    <div class="checkbox">
        <input id="groupedCheckboxID4" type="checkbox" name="groupedCheckboxID4">
        <label for="groupedCheckboxID4">
            <span class="labelText">Default checkbox label</span>
        </label>
    </div>
    <div class="checkbox">
        <input id="groupedCheckboxID5" type="checkbox" name="groupedCheckboxID5">
        <label for="groupedCheckboxID5">
            <span class="labelText">Default checkbox label</span>
        </label>
    </div>
</fieldset>

Error

Label

Default checkbox label

Default checkbox label

Default checkbox label

Un message d'erreur

<fieldset class="fieldset fieldset-group notValid">
    <legend>Label</legend>
    <div class="checkbox">
        <input id="groupedErrorCheckboxID1" type="checkbox" name="groupedErrorCheckboxID1">
        <label for="groupedErrorCheckboxID1">
            <span class="labelText">Default checkbox label</span>
        </label>
    </div>
    <div class="checkbox">
        <input id="groupedErrorCheckboxID2" type="checkbox" name="groupedErrorCheckboxID2">
        <label for="groupedErrorCheckboxID2">
            <span class="labelText">Default checkbox label</span>
        </label>
    </div>
    <div class="checkbox">
        <input id="groupedErrorCheckboxID3" type="checkbox" name="groupedErrorCheckboxID3">
        <label for="groupedErrorCheckboxID3">
            <span class="labelText">Default checkbox label</span>
        </label>
    </div>
    <p class="feedback--error">Un message d'erreur</p>
</fieldset>

Disabled

Label

Disabled checkbox label

Disabled checked checkbox label

Disabled checkbox label

<fieldset class="fieldset fieldset-group" disabled>
    <legend>Label</legend>
    <div class="checkbox">
        <input id="groupedDisabledCheckboxID1" type="checkbox" name="groupedDisabledCheckboxID1">
        <label for="groupedDisabledCheckboxID1">
            <span class="labelText">Disabled checkbox label</span>
        </label>
    </div>
    <div class="checkbox">
        <input checked id="groupedDisabledCheckboxID2" type="checkbox" name="groupedDisabledCheckboxID2">
        <label for="groupedDisabledCheckboxID2">
            <span class="labelText">Disabled checked checkbox label</span>
        </label>
    </div>
    <div class="checkbox">
        <input id="groupedDisabledCheckboxID3" type="checkbox" name="groupedDisabledCheckboxID3">
        <label for="groupedDisabledCheckboxID3">
            <span class="labelText">Disabled checkbox label</span>
        </label>
    </div>
</fieldset>