È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Controlli di selezione

I controlli di selezione includono checkbox, radio button e switch.

Modalità d'uso

I controlli di selezione sono scritti in puro CSS e diventano effettivi semplicemente scrivendo il codice HTML.

Colore

Utilizza il colore di accento.

Letture correlate

Linee guida di design Material Design: Componenti - Controlli di selezione

Stile

Checkbox

Esempio

<label class="mdui-checkbox">
  <input type="checkbox"/>
  <i class="mdui-checkbox-icon"></i>
  Non selezionato per impostazione predefinita
</label>

<label class="mdui-checkbox">
  <input type="checkbox" checked/>
  <i class="mdui-checkbox-icon"></i>
  Selezionato per impostazione predefinita
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled/>
  <i class="mdui-checkbox-icon"></i>
  Disabilitato e non selezionato
</label>

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

<label class="mdui-checkbox">
  <input type="checkbox" id="indeterminate-demo1"/>
  <i class="mdui-checkbox-icon"></i>
  Stato indeterminato
</label>
<script>
  // La proprietà indeterminate può essere impostata solo tramite 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>
  Disabilitato e in stato indeterminato
</label>
<script>
  document.getElementById('indeterminate-demo2').indeterminate = true;
</script>

Radio button

Esempio

<form>

  <label class="mdui-radio">
    <input type="radio" name="group1"/>
    <i class="mdui-radio-icon"></i>
    Non selezionato per impostazione predefinita
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" checked/>
    <i class="mdui-radio-icon"></i>
    Selezionato per impostazione predefinita
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" disabled/>
    <i class="mdui-radio-icon"></i>
    Disabilitato e non selezionato
  </label>

</form>

<form>
  <label class="mdui-radio">
    <input type="radio" name="group1" disabled checked/>
    <i class="mdui-radio-icon"></i>
    Disabilitato e selezionato
  </label>
</form>

Switch

Esempio

<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>

Elenco classi CSS

Nome classe	Descrizione
`.mdui-checkbox`	Definisce una checkbox.
`.mdui-checkbox-icon`	Definisce l'icona all'interno della checkbox.
`.mdui-radio`	Definisce un radio button.
`.mdui-radio-icon`	Definisce l'icona all'interno del radio button.
`.mdui-switch`	Definisce uno switch.
`.mdui-switch-icon`	Definisce l'icona all'interno dello switch.

Text Field

Slider