La case à cocher permet à l’utilisateur de sélectionner une ou plusieurs options dans une liste. Elle est utilisée pour effectuer des sélections multiples (de 0 à N éléments), ou bien pour permettre un choix binaire, lorsque l’utilisateur peut sélectionner ou désélectionner une seule option.
Documentation
Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes
<div class="village-form-group">
<fieldset class="village-fieldset">
<legend class="village-fieldset__legend village-text--regular" id='checkboxes-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="village-fieldset__content">
<div class="village-checkbox-group">
<input name="checkboxes-1" id="checkboxes-1" type="checkbox" aria-describedby="checkboxes-1-messages">
<label class="village-label" for="checkboxes-1">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-1-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input checked name="checkboxes-2" id="checkboxes-2" type="checkbox" aria-describedby="checkboxes-2-messages">
<label class="village-label" for="checkboxes-2">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-2-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-3" id="checkboxes-3" type="checkbox" aria-describedby="checkboxes-3-messages">
<label class="village-label" for="checkboxes-3">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-3-messages" aria-live="polite">
</div>
</div>
</div>
</fieldset>
</div>
<div class="village-form-group">
<fieldset class="village-fieldset">
<legend class="village-fieldset__legend village-text--regular" id='checkboxes-small-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="village-fieldset__content">
<div class="village-checkbox-group village-checkbox-group--sm">
<input name="checkboxes-small-1" id="checkboxes-small-1" type="checkbox" aria-describedby="checkboxes-small-1-messages">
<label class="village-label" for="checkboxes-small-1">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-small-1-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group village-checkbox-group--sm">
<input checked name="checkboxes-small-2" id="checkboxes-small-2" type="checkbox" aria-describedby="checkboxes-small-2-messages">
<label class="village-label" for="checkboxes-small-2">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-small-2-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group village-checkbox-group--sm">
<input name="checkboxes-small-3" id="checkboxes-small-3" type="checkbox" aria-describedby="checkboxes-small-3-messages">
<label class="village-label" for="checkboxes-small-3">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-small-3-messages" aria-live="polite">
</div>
</div>
</div>
</fieldset>
</div>
<div class="village-form-group">
<fieldset class="village-fieldset">
<legend class="village-fieldset__legend village-text--regular" id='checkboxes-disabled-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="village-fieldset__content">
<div class="village-checkbox-group">
<input disabled name="checkboxes-disabled-1" id="checkboxes-disabled-1" type="checkbox" aria-describedby="checkboxes-disabled-1-messages">
<label class="village-label" for="checkboxes-disabled-1">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-disabled-1-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input checked disabled name="checkboxes-disabled-2" id="checkboxes-disabled-2" type="checkbox" aria-describedby="checkboxes-disabled-2-messages">
<label class="village-label" for="checkboxes-disabled-2">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-disabled-2-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input disabled name="checkboxes-disabled-3" id="checkboxes-disabled-3" type="checkbox" aria-describedby="checkboxes-disabled-3-messages">
<label class="village-label" for="checkboxes-disabled-3">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-disabled-3-messages" aria-live="polite">
</div>
</div>
</div>
</fieldset>
</div>
<div class="village-form-group">
<fieldset class="village-fieldset village-fieldset--inline">
<legend class="village-fieldset__legend village-text--regular" id='checkboxes-inline-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="village-fieldset__content">
<div class="village-checkbox-group">
<input name="checkboxes-inline-1" id="checkboxes-inline-1" type="checkbox" aria-describedby="checkboxes-inline-1-messages">
<label class="village-label" for="checkboxes-inline-1">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-inline-1-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-inline-2" id="checkboxes-inline-2" type="checkbox" aria-describedby="checkboxes-inline-2-messages">
<label class="village-label" for="checkboxes-inline-2">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-inline-2-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-inline-3" id="checkboxes-inline-3" type="checkbox" aria-describedby="checkboxes-inline-3-messages">
<label class="village-label" for="checkboxes-inline-3">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-inline-3-messages" aria-live="polite">
</div>
</div>
</div>
</fieldset>
</div>
<div class="village-form-group">
<fieldset class="village-fieldset">
<legend class="village-fieldset__legend village-text--regular" id='checkboxes-hint-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="village-fieldset__content">
<div class="village-checkbox-group">
<input name="checkboxes-hint-1" id="checkboxes-hint-1" type="checkbox" aria-describedby="checkboxes-hint-1-messages">
<label class="village-label" for="checkboxes-hint-1">
Label checkbox
<span class="village-hint-text">Texte de description additionnel</span>
</label>
<div class="village-messages-group" id="checkboxes-hint-1-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-hint-2" id="checkboxes-hint-2" type="checkbox" aria-describedby="checkboxes-hint-2-messages">
<label class="village-label" for="checkboxes-hint-2">
Label checkbox
<span class="village-hint-text">Texte de description additionnel</span>
</label>
<div class="village-messages-group" id="checkboxes-hint-2-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-hint-3" id="checkboxes-hint-3" type="checkbox" aria-describedby="checkboxes-hint-3-messages">
<label class="village-label" for="checkboxes-hint-3">
Label checkbox
<span class="village-hint-text">Texte de description additionnel</span>
</label>
<div class="village-messages-group" id="checkboxes-hint-3-messages" aria-live="polite">
</div>
</div>
</div>
</fieldset>
</div>
<div class="village-form-group">
<fieldset class="village-fieldset village-fieldset--error" aria-labelledby="checkboxes-error-legend checkboxes-error-desc-error" role="group">
<legend class="village-fieldset__legend village-text--regular" id='checkboxes-error-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="village-fieldset__content">
<div class="village-checkbox-group">
<input name="checkboxes-error-1" id="checkboxes-error-1" type="checkbox" aria-describedby="checkboxes-error-1-messages">
<label class="village-label" for="checkboxes-error-1">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-error-1-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-error-2" id="checkboxes-error-2" type="checkbox" aria-describedby="checkboxes-error-2-messages">
<label class="village-label" for="checkboxes-error-2">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-error-2-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-error-3" id="checkboxes-error-3" type="checkbox" aria-describedby="checkboxes-error-3-messages">
<label class="village-label" for="checkboxes-error-3">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-error-3-messages" aria-live="polite">
</div>
</div>
</div>
<p id="checkboxes-error-desc-error" class="village-error-text">
Texte d’erreur obligatoire
</p>
</fieldset>
</div>
<div class="village-form-group">
<fieldset class="village-fieldset village-fieldset--valid" aria-labelledby="checkboxes-valid-legend checkboxes-valid-desc-valid" role="group">
<legend class="village-fieldset__legend village-text--regular" id='checkboxes-valid-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="village-fieldset__content">
<div class="village-checkbox-group">
<input name="checkboxes-valid-1" id="checkboxes-valid-1" type="checkbox" aria-describedby="checkboxes-valid-1-messages">
<label class="village-label" for="checkboxes-valid-1">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-valid-1-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-valid-2" id="checkboxes-valid-2" type="checkbox" aria-describedby="checkboxes-valid-2-messages">
<label class="village-label" for="checkboxes-valid-2">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-valid-2-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-valid-3" id="checkboxes-valid-3" type="checkbox" aria-describedby="checkboxes-valid-3-messages">
<label class="village-label" for="checkboxes-valid-3">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-valid-3-messages" aria-live="polite">
</div>
</div>
</div>
<p id="checkboxes-valid-desc-valid" class="village-valid-text">
Texte de validation
</p>
</fieldset>
</div>
<div class="village-form-group">
<fieldset class="village-fieldset village-fieldset--inline village-fieldset--error" aria-labelledby="checkboxes-error-inline-legend checkboxes-error-inline-desc-error" role="group">
<legend class="village-fieldset__legend village-text--regular" id='checkboxes-error-inline-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="village-fieldset__content">
<div class="village-checkbox-group">
<input name="checkboxes-error-inline-1" id="checkboxes-error-inline-1" type="checkbox" aria-describedby="checkboxes-error-inline-1-messages">
<label class="village-label" for="checkboxes-error-inline-1">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-error-inline-1-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-error-inline-2" id="checkboxes-error-inline-2" type="checkbox" aria-describedby="checkboxes-error-inline-2-messages">
<label class="village-label" for="checkboxes-error-inline-2">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-error-inline-2-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-error-inline-3" id="checkboxes-error-inline-3" type="checkbox" aria-describedby="checkboxes-error-inline-3-messages">
<label class="village-label" for="checkboxes-error-inline-3">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-error-inline-3-messages" aria-live="polite">
</div>
</div>
</div>
<p id="checkboxes-error-inline-desc-error" class="village-error-text">
Texte d’erreur obligatoire
</p>
</fieldset>
</div>
<div class="village-form-group">
<fieldset class="village-fieldset village-fieldset--inline village-fieldset--valid" aria-labelledby="checkboxes-valid-inline-legend checkboxes-valid-inline-desc-valid" role="group">
<legend class="village-fieldset__legend village-text--regular" id='checkboxes-valid-inline-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="village-fieldset__content">
<div class="village-checkbox-group">
<input name="checkboxes-valid-inline-1" id="checkboxes-valid-inline-1" type="checkbox" aria-describedby="checkboxes-valid-inline-1-messages">
<label class="village-label" for="checkboxes-valid-inline-1">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-valid-inline-1-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-valid-inline-2" id="checkboxes-valid-inline-2" type="checkbox" aria-describedby="checkboxes-valid-inline-2-messages">
<label class="village-label" for="checkboxes-valid-inline-2">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-valid-inline-2-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-valid-inline-3" id="checkboxes-valid-inline-3" type="checkbox" aria-describedby="checkboxes-valid-inline-3-messages">
<label class="village-label" for="checkboxes-valid-inline-3">
Label checkbox
</label>
<div class="village-messages-group" id="checkboxes-valid-inline-3-messages" aria-live="polite">
</div>
</div>
</div>
<p id="checkboxes-valid-inline-desc-valid" class="village-valid-text">
Texte de validation
</p>
</fieldset>
</div>
<div class="village-form-group">
<fieldset class="village-fieldset">
<legend class="village-fieldset__legend village-text--regular" id='checkboxes-hint-element-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="village-fieldset__content">
<div class="village-checkbox-group">
<input name="checkboxes-hint-element-1" id="checkboxes-hint-element-1" type="checkbox" aria-describedby="checkboxes-hint-element-1-messages">
<label class="village-label" for="checkboxes-hint-element-1">
Label checkbox
<span class="village-hint-text">Texte de description additionnel</span>
</label>
<div class="village-messages-group" id="checkboxes-hint-element-1-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-hint-element-2" id="checkboxes-hint-element-2" type="checkbox" aria-describedby="checkboxes-hint-element-2-messages">
<label class="village-label" for="checkboxes-hint-element-2">
Label checkbox
<span class="village-hint-text">Texte de description additionnel</span>
</label>
<div class="village-messages-group" id="checkboxes-hint-element-2-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group">
<input name="checkboxes-hint-element-3" id="checkboxes-hint-element-3" type="checkbox" aria-describedby="checkboxes-hint-element-3-messages">
<label class="village-label" for="checkboxes-hint-element-3">
Label checkbox
<span class="village-hint-text">Texte de description additionnel</span>
</label>
<div class="village-messages-group" id="checkboxes-hint-element-3-messages" aria-live="polite">
</div>
</div>
</div>
</fieldset>
</div>
<div class="village-form-group">
<fieldset class="village-fieldset">
<legend class="village-fieldset__legend village-text--regular" id='checkboxes-hint-el-sm-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="village-fieldset__content">
<div class="village-checkbox-group village-checkbox-group--sm">
<input name="checkboxes-hint-el-sm-1" id="checkboxes-hint-el-sm-1" type="checkbox" aria-describedby="checkboxes-hint-el-sm-1-messages">
<label class="village-label" for="checkboxes-hint-el-sm-1">
Label checkbox
<span class="village-hint-text">Texte de description additionnel</span>
</label>
<div class="village-messages-group" id="checkboxes-hint-el-sm-1-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group village-checkbox-group--sm">
<input name="checkboxes-hint-el-sm-2" id="checkboxes-hint-el-sm-2" type="checkbox" aria-describedby="checkboxes-hint-el-sm-2-messages">
<label class="village-label" for="checkboxes-hint-el-sm-2">
Label checkbox
<span class="village-hint-text">Texte de description additionnel</span>
</label>
<div class="village-messages-group" id="checkboxes-hint-el-sm-2-messages" aria-live="polite">
</div>
</div>
<div class="village-checkbox-group village-checkbox-group--sm">
<input name="checkboxes-hint-el-sm-3" id="checkboxes-hint-el-sm-3" type="checkbox" aria-describedby="checkboxes-hint-el-sm-3-messages">
<label class="village-label" for="checkboxes-hint-el-sm-3">
Label checkbox
<span class="village-hint-text">Texte de description additionnel</span>
</label>
<div class="village-messages-group" id="checkboxes-hint-el-sm-3-messages" aria-live="polite">
</div>
</div>
</div>
</fieldset>
</div>