near_me
Primeros pasos
keyboard_arrow_downlayers
Estilo
keyboard_arrow_downwidgets
Componentes
keyboard_arrow_downlocal_mall
Recursos
keyboard_arrow_downEl nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.
Controles de selección
Los controles de selección incluyen Checkbox, Radio y Switch.
Modo de uso
Los controles de selección están escritos solo con CSS; basta con escribir el código HTML para que funcionen.
Color
Usar color de énfasis.
Lectura relacionada
Pautas de diseño de Material Design: componentes - Controles de selección
Ejemplo
<label class="mdui-checkbox">
<input type="checkbox"/>
<i class="mdui-checkbox-icon"></i>
No seleccionado por defecto
</label>
<label class="mdui-checkbox">
<input type="checkbox" checked/>
<i class="mdui-checkbox-icon"></i>
Seleccionado por defecto
</label>
<label class="mdui-checkbox">
<input type="checkbox" disabled/>
<i class="mdui-checkbox-icon"></i>
Deshabilitado y no seleccionado
</label>
<label class="mdui-checkbox">
<input type="checkbox" disabled checked/>
<i class="mdui-checkbox-icon"></i>
Deshabilitado y seleccionado
</label>
<label class="mdui-checkbox">
<input type="checkbox" id="indeterminate-demo1"/>
<i class="mdui-checkbox-icon"></i>
Estado indeterminado
</label>
<script>
// La propiedad indeterminate solo puede establecerse mediante 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>
Deshabilitado y en estado indeterminado
</label>
<script>
document.getElementById('indeterminate-demo2').indeterminate = true;
</script>Ejemplo
<form>
<label class="mdui-radio">
<input type="radio" name="group1"/>
<i class="mdui-radio-icon"></i>
No seleccionado por defecto
</label>
<label class="mdui-radio">
<input type="radio" name="group1" checked/>
<i class="mdui-radio-icon"></i>
Seleccionado por defecto
</label>
<label class="mdui-radio">
<input type="radio" name="group1" disabled/>
<i class="mdui-radio-icon"></i>
Deshabilitado y no seleccionado
</label>
</form>
<form>
<label class="mdui-radio">
<input type="radio" name="group1" disabled checked/>
<i class="mdui-radio-icon"></i>
Deshabilitado y seleccionado
</label>
</form>Ejemplo
<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>