near_me
Introdução
keyboard_arrow_downlayers
Estilo
keyboard_arrow_downwidgets
Componentes
keyboard_arrow_downEfeito rippleBotãoBotão de ação flutuanteCampo de seleçãoDivisorPainel colapsávelCampo de textoControles de seleçãoSliderListaControles de listaLista em gradeAbaBarra de ferramentasBarra de aplicativoGaveta de navegaçãoBarra de navegação inferiorCardChipTooltipSnackbarTabelaDiálogoMenuBarra de progresso
local_mall
Recursos
keyboard_arrow_downO novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.
Controles de seleção
Controles de seleção incluem checkbox, radio e switch.
Como usar
Controles de seleção são escritos puramente em CSS e entram em vigor apenas escrevendo o código HTML.
Cores
Usa a cor de destaque.
Leitura relacionada
Diretrizes de design do Material Design: Componentes - Controles de seleção
Exemplo
<label class="mdui-checkbox">
<input type="checkbox"/>
<i class="mdui-checkbox-icon"></i>
Não selecionado por padrão
</label>
<label class="mdui-checkbox">
<input type="checkbox" checked/>
<i class="mdui-checkbox-icon"></i>
Selecionado por padrão
</label>
<label class="mdui-checkbox">
<input type="checkbox" disabled/>
<i class="mdui-checkbox-icon"></i>
Desativado e não selecionado
</label>
<label class="mdui-checkbox">
<input type="checkbox" disabled checked/>
<i class="mdui-checkbox-icon"></i>
Desativado e selecionado
</label>
<label class="mdui-checkbox">
<input type="checkbox" id="indeterminate-demo1"/>
<i class="mdui-checkbox-icon"></i>
Estado indeterminado
</label>
<script>
// A propriedade indeterminate só pode ser definida através de 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>
Desativado e estado indeterminado
</label>
<script>
document.getElementById('indeterminate-demo2').indeterminate = true;
</script>Exemplo
<form>
<label class="mdui-radio">
<input type="radio" name="group1"/>
<i class="mdui-radio-icon"></i>
Não selecionado por padrão
</label>
<label class="mdui-radio">
<input type="radio" name="group1" checked/>
<i class="mdui-radio-icon"></i>
Selecionado por padrão
</label>
<label class="mdui-radio">
<input type="radio" name="group1" disabled/>
<i class="mdui-radio-icon"></i>
Desativado e não selecionado
</label>
</form>
<form>
<label class="mdui-radio">
<input type="radio" name="group1" disabled checked/>
<i class="mdui-radio-icon"></i>
Desativado e selecionado
</label>
</form>Exemplo
<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>