Composants de sélection

Attention

En état sélectionné, en raison du passage du texte en gras (l'espace d'expression est plus important), il est donc nécessaire/impératif de prévoir la largeur du composant en fonction de cette contrainte.

Le composant case à cocher prend 100% de la largeur (12 colonnes) de son parent.

#case-a-cocher

Case à cocher

Utiliser la case à cocher ou check box si plusieurs alternatives sont possibles.

Cases à cocher classiques

#radio

Radio

Le bouton radio s’impose lorsqu'une seule réponse est possible.

Radio horizontal

Pour l'ensemble des choix à texte court.

Radio vertical

À utiliser pour apporter de la précision lors du choix, ou pour un texte de choix très long de type les consentements.

Radio duo

À utiliser pour une question fermée : Oui/non,; 1/2...

Radio ligne

Pour des propositions de réponses courtes en terme de valeur, qui ne dépassent pas le nombre de 4

Radio formule

Radio authentification

Radio icone description

#ligne-option-checkbox

Ligne option checkbox

#liste

Liste

#slider

Slider

Information

A noter que ce composant Slider est disponible en version React. Il existe aussi pour les simulateurs en version html mais pas sous forme de composant unitaire. Vous trouverez des exemples dans la rubrique Simulateurs.