Radios

v-0.0.0

Classic

Default

Default radio label

<fieldset class="fieldset">
    <div class="radio">
        <input id="defaultRadioId" type="radio" name="radioName">
        <label for="defaultRadioId">
            <span class="labelText">Default radio label</span>
        </label>
    </div>
</fieldset>

Without lable

Radio hidden label

<fieldset class="fieldset">
    <div class="radio noLabel">
        <input id="noLabelRadioId" type="radio" name="radioName">
        <label for="noLabelRadioId">
            <span class="labelText">Radio hidden label</span>
        </label>
    </div>
</fieldset>

Error

Disabled label

Un message d'erreur

<fieldset class="fieldset notValid">
    <div class="radio">
        <input id="disabledRadioId" type="radio" name="radioName">
        <label for="disabledRadioId">
            <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="radio">
        <input disabled id="disabledRadioId" type="radio" name="radioName">
        <label for="disabledRadioId">
            <span class="labelText">Disabled label</span>
        </label>
    </div>
</fieldset>

Long label

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

<fieldset class="fieldset">
    <div class="radio">
        <input id="longLabeldefaultRadioId" type="radio" name="radioNameLongLabel">
        <label for="longLabeldefaultRadioId">
            <span class="labelText">Ceci est un label de radio 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 radio label

<fieldset class="fieldset">
    <div class="radio--btn">
        <input id="buttonRadioId" type="radio" name="radioName">
        <label for="buttonRadioId">
            <span class="labelText">Btn radio label</span>
        </label>
    </div>
</fieldset>

With icon

Radio with icon label

<fieldset class="fieldset">
    <div class="radio--btn icon--thumbUp">
        <input id="radioIconId" type="radio" name="radioName">
        <label for="radioIconId">
            <span class="labelText">Radio with icon label</span>
        </label>
    </div>
</fieldset>

Error

Btn Error label

Un message d'erreur

Radio with icon label

Un message d'erreur

<fieldset class="fieldset notValid">
    <div class="radio--btn">
        <input id="btnDesabledRadioId" type="radio" name="radioName">
        <label for="btnDesabledRadioId">
            <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

Radio with icon label

<fieldset class="fieldset">
    <div class="radio--btn">
        <input disabled id="btnDesabledRadioId" type="radio" name="radioBtnDisabled">
        <label for="btnDesabledRadioId">
            <span class="labelText">Btn disabled label</span>
        </label>
    </div>
</fieldset>