Элементы выбора

Элементы выбора включают чекбоксы, радиокнопки и переключатели.

Использование

Элементы выбора написаны на чистом CSS и работают сразу после добавления HTML-кода.

Цвет

Используется акцентный цвет.

Связанное чтение

Стиль

Чекбокс

Пример

<label class="mdui-checkbox">
  <input type="checkbox"/>
  <i class="mdui-checkbox-icon"></i>
  По умолчанию не выбран
</label>

<label class="mdui-checkbox">
  <input type="checkbox" checked/>
  <i class="mdui-checkbox-icon"></i>
  По умолчанию выбран
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled/>
  <i class="mdui-checkbox-icon"></i>
  Отключен, не выбран
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled checked/>
  <i class="mdui-checkbox-icon"></i>
  Отключен, выбран
</label>

<label class="mdui-checkbox">
  <input type="checkbox" id="indeterminate-demo1"/>
  <i class="mdui-checkbox-icon"></i>
  Состояние неопределенности
</label>
<script>
  // Свойство indeterminate можно установить только через 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>
  Отключен, состояние неопределенности
</label>
<script>
  document.getElementById('indeterminate-demo2').indeterminate = true;
</script>

Радиокнопка

Пример

<form>

  <label class="mdui-radio">
    <input type="radio" name="group1"/>
    <i class="mdui-radio-icon"></i>
    По умолчанию не выбран
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" checked/>
    <i class="mdui-radio-icon"></i>
    По умолчанию выбран
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" disabled/>
    <i class="mdui-radio-icon"></i>
    Отключен, не выбран
  </label>

</form>

<form>
  <label class="mdui-radio">
    <input type="radio" name="group1" disabled checked/>
    <i class="mdui-radio-icon"></i>
    Отключен, выбран
  </label>
</form>

Переключатель

Пример

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

Список CSS-классов

Имя класса	Описание
`.mdui-checkbox`	Определяет чекбокс.
`.mdui-checkbox-icon`	Определяет иконку внутри чекбокса.
`.mdui-radio`	Определяет радиокнопку.
`.mdui-radio-icon`	Определяет иконку внутри радиокнопки.
`.mdui-switch`	Определяет переключатель.
`.mdui-switch-icon`	Определяет иконку внутри переключателя.

Текстовое поле

Слайдер