DSFR v1.15.0
La demande de civilité permet à un utilisateur de donner sa civilité (sexe, situation familière, titre d’appel).
Documentation<fieldset class="fr-fieldset" id="sex-7728" aria-labelledby="sex-7728-legend sex-7728-messages">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="sex-7728-legend">
Sexe
</legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group fr-radio-group--sm">
<input type="radio" id="female-7729" name="sex">
<label class="fr-label" for="female-7729">
Feminin
</label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group fr-radio-group--sm">
<input type="radio" id="male-7730" name="sex">
<label class="fr-label" for="male-7730">
Masculin
</label>
</div>
</div>
<div class="fr-messages-group" id="sex-7728-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="family-7734" aria-labelledby="family-7734-legend family-7734-messages">
<legend class="fr-sr-only" id="family-7734-legend">
Demande de situation familiale
</legend>
<div class="fr-fieldset__element">
<div class="fr-select-group">
<label class="fr-label" for="family-7735">
Situation familiale
</label>
<select class="fr-select" aria-describedby="family-7735-messages" id="family-7735" name="family">
<option value="" selected disabled>Sélectionner une option</option>
<option value="1">Célibataire</option>
<option value="2">Concubinage</option>
<option value="3">Pacsé</option>
<option value="4">Marié</option>
<option value="5">Veuf</option>
<option value="6">Divorcé</option>
<option value="7">Sans réponse</option>
</select>
<div class="fr-messages-group" id="family-7735-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="family-7734-messages" aria-live="polite">
</div>
</fieldset>
Les boutons radios sont recommandés lorsque l’utilisateur doit choisir un élément parmi 2 à 5 choix possibles.
<fieldset class="fr-fieldset" id="honorific-7741" aria-labelledby="honorific-7741-legend honorific-7741-messages">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="honorific-7741-legend">
Titre d’appel
</legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group fr-radio-group--sm">
<input type="radio" id="honorific-7742" name="honorific">
<label class="fr-label" for="honorific-7742">
Docteur
</label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group fr-radio-group--sm">
<input type="radio" id="honorific-7743" name="honorific">
<label class="fr-label" for="honorific-7743">
Inspecteur
</label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group fr-radio-group--sm">
<input type="radio" id="honorific-7744" name="honorific">
<label class="fr-label" for="honorific-7744">
Sans réponse
</label>
</div>
</div>
<div class="fr-messages-group" id="honorific-7741-messages" aria-live="polite">
</div>
</fieldset>
Au delà de 5 choix ou lorsque l’espace n’est pas suffisant, il est préférable d’utiliser une liste déroulante.
<fieldset class="fr-fieldset" id="honorific-7748" aria-labelledby="honorific-7748-legend honorific-7748-messages">
<legend class="fr-sr-only" id="honorific-7748-legend">
Demande du titre d’appel
</legend>
<div class="fr-fieldset__element">
<div class="fr-select-group">
<label class="fr-label" for="honorific-7749">
Titre d’appel
</label>
<select class="fr-select" aria-describedby="honorific-7749-messages" id="honorific-7749" name="honorific">
<option value="" selected disabled>Sélectionner une option</option>
<option value="1">Recteur</option>
<option value="2">Inspecteur</option>
<option value="3">Proviseur</option>
<option value="4">Professeur</option>
<option value="5">Docteur</option>
<option value="6">Principal</option>
<option value="7">Sans réponse</option>
</select>
<div class="fr-messages-group" id="honorific-7749-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="honorific-7748-messages" aria-live="polite">
</div>
</fieldset>