mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Commandes

Les contrôles de sélection incluent les cases à cocher, les boutons radio et les Switchs.

Utilisation

Les contrôles de sélection sont écrits en CSS pur ; il suffit d’écrire du code HTML pour les activer.

Couleurs

Utiliser la couleur d’accentuation.

Lecture associée

Spécifications Material Design : composants - contrôles de sélection

Style

Case à cocher

Exemple

<label class="mdui-checkbox">
  <input type="checkbox"/>
  <i class="mdui-checkbox-icon"></i>
  Non coché par défaut
</label>

<label class="mdui-checkbox">
  <input type="checkbox" checked/>
  <i class="mdui-checkbox-icon"></i>
  Coché par défaut
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled/>
  <i class="mdui-checkbox-icon"></i>
  Désactivé et non coché
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled checked/>
  <i class="mdui-checkbox-icon"></i>
  Désactivé et coché
</label>

<label class="mdui-checkbox">
  <input type="checkbox" id="indeterminate-demo1"/>
  <i class="mdui-checkbox-icon"></i>
  État indéterminé
</label>
<script>
  // L’attribut indeterminate ne peut être défini qu’en JavaScript.
  document.getElementById('indeterminate-demo1').indeterminate = true;
</script>

<label class="mdui-checkbox">
  <input type="checkbox" disabled id="indeterminate-demo2"/>
  <i class="mdui-checkbox-icon"></i>
  Désactivé et état indéterminé
</label>
<script>
  document.getElementById('indeterminate-demo2').indeterminate = true;
</script>

Bouton radio

Exemple

<form>

  <label class="mdui-radio">
    <input type="radio" name="group1"/>
    <i class="mdui-radio-icon"></i>
    Non coché par défaut
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" checked/>
    <i class="mdui-radio-icon"></i>
    Coché par défaut
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" disabled/>
    <i class="mdui-radio-icon"></i>
    Désactivé et non coché
  </label>

</form>

<form>
  <label class="mdui-radio">
    <input type="radio" name="group1" disabled checked/>
    <i class="mdui-radio-icon"></i>
    Désactivé et coché
  </label>
</form>

Switch

Exemple

<label class="mdui-switch">
  <input type="checkbox"/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" checked/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled checked/>
  <i class="mdui-switch-icon"></i>
</label>

Classes CSS

Nom de classe	Description
`.mdui-checkbox`	Définir une case à cocher.
`.mdui-checkbox-icon`	Définir l’icône à l’intérieur de la case à cocher.
`.mdui-radio`	Définir un bouton radio.
`.mdui-radio-icon`	Définir l’icône à l’intérieur du bouton radio.
`.mdui-switch`	Définir un Switch.
`.mdui-switch-icon`	Définir l’icône à l’intérieur du Switch.

Champ de texte

Slider