Pour commencer

Accédez aux outils et aux éléments de base qui permettent de concevoir et de mettre au point des expériences cohérentes et accessibles.

Développer Conception

Cases à cocher

Permet aux utilisateurs de sélectionner une ou plusieurs options.

Conseils

Utilisez des cases à cocher pour permettre aux utilisateurs de sélectionner une ou plusieurs options.


Case à cocher unique

Voulez-vous recevoir des mises à jour sur le statut ?

HTML

<!-- Case à cocher -->
<fieldset class="gnb-checkboxes">
	<legend>Voulez-vous recevoir des mises à jour sur le statut ?</legend>
	<div class="pair">
		<input type="checkbox" name="oui" id="oui">
		<label for="oui">oui</label>
	</div>
</fieldset>

Groupe de cases à cocher

Sélectionnez tous vos fruits préférés :

HTML

<!-- Groupe de cases à cocher -->
<fieldset class="gnb-checkboxes">
    <legend>Sélectionnez tous vos fruits préférés :</legend>
    <div class="pair">
        <input type="checkbox" name="bleuet" id="bleuet" checked>
        <label for="bleuet">Bleuet</label>
    </div>
    <div class="pair">
        <input type="checkbox" name="pomme" id="pomme">
        <label for="pomme">Pomme</label>
    </div>
    <div class="pair">
        <input type="checkbox" name="cerise" id="cerise">
        <label for="cerise">Cerise</label>
    </div>
    <div class="pair">
        <input type="checkbox" name="orange" id="orange">
        <label for="orange">Orange</label>
    </div>
    <div class="pair">
        <input type="checkbox" name="citron" id="citron">
        <label for="citron">Citron</label>
    </div>
</fieldset>