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="fr-form-group">
<fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="fr-fieldset__content">
<div class="fr-checkbox-group">
<input name="checkboxes-1" id="checkboxes-1" type="checkbox" aria-describedby="checkboxes-1-messages">
<label class="fr-label" for="checkboxes-1">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-1-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input checked name="checkboxes-2" id="checkboxes-2" type="checkbox" aria-describedby="checkboxes-2-messages">
<label class="fr-label" for="checkboxes-2">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-2-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-3" id="checkboxes-3" type="checkbox" aria-describedby="checkboxes-3-messages">
<label class="fr-label" for="checkboxes-3">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-3-messages" aria-live="assertive">
</div>
</div>
</div>
</fieldset>
</div>
<div class="fr-form-group">
<fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-small-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="fr-fieldset__content">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="checkboxes-small-1" id="checkboxes-small-1" type="checkbox" aria-describedby="checkboxes-small-1-messages">
<label class="fr-label" for="checkboxes-small-1">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-small-1-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input checked name="checkboxes-small-2" id="checkboxes-small-2" type="checkbox" aria-describedby="checkboxes-small-2-messages">
<label class="fr-label" for="checkboxes-small-2">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-small-2-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="checkboxes-small-3" id="checkboxes-small-3" type="checkbox" aria-describedby="checkboxes-small-3-messages">
<label class="fr-label" for="checkboxes-small-3">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-small-3-messages" aria-live="assertive">
</div>
</div>
</div>
</fieldset>
</div>
<div class="fr-form-group">
<fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-disabled-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="fr-fieldset__content">
<div class="fr-checkbox-group">
<input disabled name="checkboxes-disabled-1" id="checkboxes-disabled-1" type="checkbox" aria-describedby="checkboxes-disabled-1-messages">
<label class="fr-label" for="checkboxes-disabled-1">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-disabled-1-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input checked disabled name="checkboxes-disabled-2" id="checkboxes-disabled-2" type="checkbox" aria-describedby="checkboxes-disabled-2-messages">
<label class="fr-label" for="checkboxes-disabled-2">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-disabled-2-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input disabled name="checkboxes-disabled-3" id="checkboxes-disabled-3" type="checkbox" aria-describedby="checkboxes-disabled-3-messages">
<label class="fr-label" for="checkboxes-disabled-3">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-disabled-3-messages" aria-live="assertive">
</div>
</div>
</div>
</fieldset>
</div>
<div class="fr-form-group">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-inline-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="fr-fieldset__content">
<div class="fr-checkbox-group">
<input name="checkboxes-inline-1" id="checkboxes-inline-1" type="checkbox" aria-describedby="checkboxes-inline-1-messages">
<label class="fr-label" for="checkboxes-inline-1">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-inline-1-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-inline-2" id="checkboxes-inline-2" type="checkbox" aria-describedby="checkboxes-inline-2-messages">
<label class="fr-label" for="checkboxes-inline-2">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-inline-2-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-inline-3" id="checkboxes-inline-3" type="checkbox" aria-describedby="checkboxes-inline-3-messages">
<label class="fr-label" for="checkboxes-inline-3">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-inline-3-messages" aria-live="assertive">
</div>
</div>
</div>
</fieldset>
</div>
<div class="fr-form-group">
<fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-hint-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="fr-fieldset__content">
<div class="fr-checkbox-group">
<input name="checkboxes-hint-1" id="checkboxes-hint-1" type="checkbox" aria-describedby="checkboxes-hint-1-messages">
<label class="fr-label" for="checkboxes-hint-1">
Label checkbox
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-messages-group" id="checkboxes-hint-1-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-hint-2" id="checkboxes-hint-2" type="checkbox" aria-describedby="checkboxes-hint-2-messages">
<label class="fr-label" for="checkboxes-hint-2">
Label checkbox
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-messages-group" id="checkboxes-hint-2-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-hint-3" id="checkboxes-hint-3" type="checkbox" aria-describedby="checkboxes-hint-3-messages">
<label class="fr-label" for="checkboxes-hint-3">
Label checkbox
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-messages-group" id="checkboxes-hint-3-messages" aria-live="assertive">
</div>
</div>
</div>
</fieldset>
</div>
<div class="fr-form-group">
<fieldset class="fr-fieldset fr-fieldset--error" aria-labelledby="checkboxes-error-legend checkboxes-error-desc-error" role="group">
<legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-error-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="fr-fieldset__content">
<div class="fr-checkbox-group">
<input name="checkboxes-error-1" id="checkboxes-error-1" type="checkbox" aria-describedby="checkboxes-error-1-messages">
<label class="fr-label" for="checkboxes-error-1">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-error-1-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-error-2" id="checkboxes-error-2" type="checkbox" aria-describedby="checkboxes-error-2-messages">
<label class="fr-label" for="checkboxes-error-2">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-error-2-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-error-3" id="checkboxes-error-3" type="checkbox" aria-describedby="checkboxes-error-3-messages">
<label class="fr-label" for="checkboxes-error-3">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-error-3-messages" aria-live="assertive">
</div>
</div>
</div>
<p id="checkboxes-error-desc-error" class="fr-error-text">
Texte d’erreur obligatoire
</p>
</fieldset>
</div>
<div class="fr-form-group">
<fieldset class="fr-fieldset fr-fieldset--valid" aria-labelledby="checkboxes-valid-legend checkboxes-valid-desc-valid" role="group">
<legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-valid-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="fr-fieldset__content">
<div class="fr-checkbox-group">
<input name="checkboxes-valid-1" id="checkboxes-valid-1" type="checkbox" aria-describedby="checkboxes-valid-1-messages">
<label class="fr-label" for="checkboxes-valid-1">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-valid-1-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-valid-2" id="checkboxes-valid-2" type="checkbox" aria-describedby="checkboxes-valid-2-messages">
<label class="fr-label" for="checkboxes-valid-2">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-valid-2-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-valid-3" id="checkboxes-valid-3" type="checkbox" aria-describedby="checkboxes-valid-3-messages">
<label class="fr-label" for="checkboxes-valid-3">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-valid-3-messages" aria-live="assertive">
</div>
</div>
</div>
<p id="checkboxes-valid-desc-valid" class="fr-valid-text">
Texte de validation
</p>
</fieldset>
</div>
<div class="fr-form-group">
<fieldset class="fr-fieldset fr-fieldset--inline fr-fieldset--error" aria-labelledby="checkboxes-error-inline-legend checkboxes-error-inline-desc-error" role="group">
<legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-error-inline-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="fr-fieldset__content">
<div class="fr-checkbox-group">
<input name="checkboxes-error-inline-1" id="checkboxes-error-inline-1" type="checkbox" aria-describedby="checkboxes-error-inline-1-messages">
<label class="fr-label" for="checkboxes-error-inline-1">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-error-inline-1-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-error-inline-2" id="checkboxes-error-inline-2" type="checkbox" aria-describedby="checkboxes-error-inline-2-messages">
<label class="fr-label" for="checkboxes-error-inline-2">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-error-inline-2-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-error-inline-3" id="checkboxes-error-inline-3" type="checkbox" aria-describedby="checkboxes-error-inline-3-messages">
<label class="fr-label" for="checkboxes-error-inline-3">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-error-inline-3-messages" aria-live="assertive">
</div>
</div>
</div>
<p id="checkboxes-error-inline-desc-error" class="fr-error-text">
Texte d’erreur obligatoire
</p>
</fieldset>
</div>
<div class="fr-form-group">
<fieldset class="fr-fieldset fr-fieldset--inline fr-fieldset--valid" aria-labelledby="checkboxes-valid-inline-legend checkboxes-valid-inline-desc-valid" role="group">
<legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-valid-inline-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="fr-fieldset__content">
<div class="fr-checkbox-group">
<input name="checkboxes-valid-inline-1" id="checkboxes-valid-inline-1" type="checkbox" aria-describedby="checkboxes-valid-inline-1-messages">
<label class="fr-label" for="checkboxes-valid-inline-1">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-valid-inline-1-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-valid-inline-2" id="checkboxes-valid-inline-2" type="checkbox" aria-describedby="checkboxes-valid-inline-2-messages">
<label class="fr-label" for="checkboxes-valid-inline-2">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-valid-inline-2-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-valid-inline-3" id="checkboxes-valid-inline-3" type="checkbox" aria-describedby="checkboxes-valid-inline-3-messages">
<label class="fr-label" for="checkboxes-valid-inline-3">
Label checkbox
</label>
<div class="fr-messages-group" id="checkboxes-valid-inline-3-messages" aria-live="assertive">
</div>
</div>
</div>
<p id="checkboxes-valid-inline-desc-valid" class="fr-valid-text">
Texte de validation
</p>
</fieldset>
</div>
<div class="fr-form-group">
<fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-hint-element-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="fr-fieldset__content">
<div class="fr-checkbox-group">
<input name="checkboxes-hint-element-1" id="checkboxes-hint-element-1" type="checkbox" aria-describedby="checkboxes-hint-element-1-messages">
<label class="fr-label" for="checkboxes-hint-element-1">
Label checkbox
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-messages-group" id="checkboxes-hint-element-1-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-hint-element-2" id="checkboxes-hint-element-2" type="checkbox" aria-describedby="checkboxes-hint-element-2-messages">
<label class="fr-label" for="checkboxes-hint-element-2">
Label checkbox
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-messages-group" id="checkboxes-hint-element-2-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group">
<input name="checkboxes-hint-element-3" id="checkboxes-hint-element-3" type="checkbox" aria-describedby="checkboxes-hint-element-3-messages">
<label class="fr-label" for="checkboxes-hint-element-3">
Label checkbox
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-messages-group" id="checkboxes-hint-element-3-messages" aria-live="assertive">
</div>
</div>
</div>
</fieldset>
</div>
<div class="fr-form-group">
<fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-hint-el-sm-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="fr-fieldset__content">
<div class="fr-checkbox-group fr-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="fr-label" for="checkboxes-hint-el-sm-1">
Label checkbox
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-messages-group" id="checkboxes-hint-el-sm-1-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group fr-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="fr-label" for="checkboxes-hint-el-sm-2">
Label checkbox
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-messages-group" id="checkboxes-hint-el-sm-2-messages" aria-live="assertive">
</div>
</div>
<div class="fr-checkbox-group fr-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="fr-label" for="checkboxes-hint-el-sm-3">
Label checkbox
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-messages-group" id="checkboxes-hint-el-sm-3-messages" aria-live="assertive">
</div>
</div>
</div>
</fieldset>
</div>