Le composant "contrôle segmenté" incite l'utilisateur à choisir entre plusieurs options d'affichage disponibles (vues), mutuellement exclusives avec une valeur sélectionnée par défaut.
Documentation<fieldset class="village-segmented">
<legend class="village-segmented__legend">
Légende
</legend>
<div class="village-segmented__elements">
<div class="village-segmented__element">
<input value="1" type="radio" id="segmented-2240-1" name="segmented-2240">
<label class="village-label" for="segmented-2240-1">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="2" checked type="radio" id="segmented-2240-2" name="segmented-2240">
<label class="village-label" for="segmented-2240-2">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="3" type="radio" id="segmented-2240-3" name="segmented-2240">
<label class="village-label" for="segmented-2240-3">
Libellé
</label>
</div>
</div>
</fieldset>
<fieldset class="village-segmented village-segmented--sm">
<legend class="village-segmented__legend">
Légende
</legend>
<div class="village-segmented__elements">
<div class="village-segmented__element">
<input value="1" type="radio" id="segmented-2243-1" name="segmented-2243">
<label class="village-label" for="segmented-2243-1">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="2" checked type="radio" id="segmented-2243-2" name="segmented-2243">
<label class="village-label" for="segmented-2243-2">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="3" type="radio" id="segmented-2243-3" name="segmented-2243">
<label class="village-label" for="segmented-2243-3">
Libellé
</label>
</div>
</div>
</fieldset>
<fieldset class="village-segmented">
<legend class="village-segmented__legend village-segmented__legend--inline">
Légende
</legend>
<div class="village-segmented__elements">
<div class="village-segmented__element">
<input value="1" type="radio" id="segmented-2246-1" name="segmented-2246">
<label class="village-label" for="segmented-2246-1">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="2" checked type="radio" id="segmented-2246-2" name="segmented-2246">
<label class="village-label" for="segmented-2246-2">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="3" type="radio" id="segmented-2246-3" name="segmented-2246">
<label class="village-label" for="segmented-2246-3">
Libellé
</label>
</div>
</div>
</fieldset>
<fieldset class="village-segmented">
<legend class="village-segmented__legend">
Légende
<span class="village-hint-text">texte additionel</span>
</legend>
<div class="village-segmented__elements">
<div class="village-segmented__element">
<input value="1" type="radio" id="segmented-2249-1" name="segmented-2249">
<label class="village-label" for="segmented-2249-1">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="2" checked type="radio" id="segmented-2249-2" name="segmented-2249">
<label class="village-label" for="segmented-2249-2">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="3" type="radio" id="segmented-2249-3" name="segmented-2249">
<label class="village-label" for="segmented-2249-3">
Libellé
</label>
</div>
</div>
</fieldset>
<fieldset class="village-segmented">
<legend class="village-segmented__legend">
Légende
</legend>
<div class="village-segmented__elements">
<div class="village-segmented__element">
<input value="1" type="radio" id="segmented-2252-1" name="segmented-2252">
<label class="village-icon-road-map-line village-label" for="segmented-2252-1">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="2" checked type="radio" id="segmented-2252-2" name="segmented-2252">
<label class="village-icon-road-map-line village-label" for="segmented-2252-2">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="3" type="radio" id="segmented-2252-3" name="segmented-2252">
<label class="village-icon-road-map-line village-label" for="segmented-2252-3">
Libellé
</label>
</div>
</div>
</fieldset>
<fieldset class="village-segmented village-segmented--no-legend">
<legend class="village-segmented__legend">
Légende
</legend>
<div class="village-segmented__elements">
<div class="village-segmented__element">
<input value="1" type="radio" id="segmented-2255-1" name="segmented-2255">
<label class="village-label" for="segmented-2255-1">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="2" checked type="radio" id="segmented-2255-2" name="segmented-2255">
<label class="village-label" for="segmented-2255-2">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="3" type="radio" id="segmented-2255-3" name="segmented-2255">
<label class="village-label" for="segmented-2255-3">
Libellé
</label>
</div>
</div>
</fieldset>
<fieldset class="village-segmented">
<legend class="village-segmented__legend">
Légende
</legend>
<div class="village-segmented__elements">
<div class="village-segmented__element">
<input value="1" type="radio" id="segmented-2258-1" name="segmented-2258">
<label class="village-label" for="segmented-2258-1">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="2" checked type="radio" id="segmented-2258-2" name="segmented-2258">
<label class="village-label" for="segmented-2258-2">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="3" disabled type="radio" id="segmented-2258-3" name="segmented-2258">
<label class="village-label" for="segmented-2258-3">
Libellé
</label>
</div>
</div>
</fieldset>
Lorsque la largeur du contrôle segmenté dépasse celle de son conteneur, la légende ne reste pas sur la même ligne. Si cela ne rentre toujours pas, les boutons passent en vertical. Réduisez la fenêtre pour voir le comportement de ce script.
<fieldset class="village-segmented">
<legend class="village-segmented__legend village-segmented__legend--inline">
Légende
</legend>
<div class="village-segmented__elements">
<div class="village-segmented__element">
<input value="1" type="radio" id="segmented-max-1" name="segmented-max">
<label class="village-icon-star-line village-label" for="segmented-max-1">
label long
</label>
</div>
<div class="village-segmented__element">
<input value="2" checked type="radio" id="segmented-max-2" name="segmented-max">
<label class="village-icon-time-line village-label" for="segmented-max-2">
label trop long
</label>
</div>
<div class="village-segmented__element">
<input value="3" type="radio" id="segmented-max-3" name="segmented-max">
<label class="village-icon-road-map-line village-label" for="segmented-max-3">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="4" type="radio" id="segmented-max-4" name="segmented-max">
<label class="village-icon-road-map-line village-label" for="segmented-max-4">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="5" type="radio" id="segmented-max-5" name="segmented-max">
<label class="village-icon-road-map-line village-label" for="segmented-max-5">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="6" type="radio" id="segmented-max-6" name="segmented-max">
<label class="village-icon-road-map-line village-label" for="segmented-max-6">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="7" type="radio" id="segmented-max-7" name="segmented-max">
<label class="village-icon-road-map-line village-label" for="segmented-max-7">
Libellé
</label>
</div>
<div class="village-segmented__element">
<input value="8" type="radio" id="segmented-max-8" name="segmented-max">
<label class="village-icon-road-map-line village-label" for="segmented-max-8">
Libellé
</label>
</div>
</div>
</fieldset>