mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-12-05 07:53:44 +03:00
104 lines
2.4 KiB
Markdown
104 lines
2.4 KiB
Markdown
|
---
|
||
|
layout: docs
|
||
|
title: Selections
|
||
|
group: material-design
|
||
|
---
|
||
|
|
||
|
## Contents
|
||
|
|
||
|
* Will be replaced with the ToC, excluding the "Contents" header
|
||
|
{:toc}
|
||
|
|
||
|
## Switches
|
||
|
|
||
|
{% example html %}
|
||
|
<form>
|
||
|
<div class="switch">
|
||
|
<label>
|
||
|
<input type="checkbox" checked>
|
||
|
Wi-Fi
|
||
|
</label>
|
||
|
</div>
|
||
|
<div class="switch">
|
||
|
<label>
|
||
|
<input type="checkbox">
|
||
|
Bluetooth
|
||
|
</label>
|
||
|
</div>
|
||
|
<div class="switch">
|
||
|
<label>
|
||
|
<input type="checkbox" disabled>
|
||
|
This is disabled
|
||
|
</label>
|
||
|
</div>
|
||
|
</form>
|
||
|
{% endexample %}
|
||
|
|
||
|
## Radios
|
||
|
|
||
|
{% example html %}
|
||
|
<form>
|
||
|
<div class="radio">
|
||
|
<label>
|
||
|
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||
|
Option one is this and that—be sure to include why it's great
|
||
|
</label>
|
||
|
</div>
|
||
|
<div class="radio">
|
||
|
<label>
|
||
|
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||
|
Option two can be something else and selecting it will deselect option one
|
||
|
</label>
|
||
|
</div>
|
||
|
<div class="radio disabled">
|
||
|
<label>
|
||
|
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
||
|
Option three is disabled
|
||
|
</label>
|
||
|
</div>
|
||
|
|
||
|
<label class="radio-inline">
|
||
|
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
|
||
|
</label>
|
||
|
<label class="radio-inline">
|
||
|
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
|
||
|
</label>
|
||
|
<label class="radio-inline">
|
||
|
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
|
||
|
</label>
|
||
|
</form>
|
||
|
{% endexample %}
|
||
|
|
||
|
## Checkboxes
|
||
|
|
||
|
{% example html %}
|
||
|
<form>
|
||
|
<div class="checkbox">
|
||
|
<label>
|
||
|
<input type="checkbox"> Check me out
|
||
|
</label>
|
||
|
</div>
|
||
|
<div class="checkbox">
|
||
|
<label>
|
||
|
<input type="checkbox" value="" checked>
|
||
|
I'm selected because I seem like the safe choice
|
||
|
</label>
|
||
|
</div>
|
||
|
<div class="checkbox disabled">
|
||
|
<label>
|
||
|
<input type="checkbox" value="" disabled>
|
||
|
Option is disabled because it is scary
|
||
|
</label>
|
||
|
</div>
|
||
|
<label class="checkbox-inline">
|
||
|
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
|
||
|
</label>
|
||
|
<label class="checkbox-inline">
|
||
|
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
|
||
|
</label>
|
||
|
<label class="checkbox-inline">
|
||
|
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
|
||
|
</label>
|
||
|
</form>
|
||
|
{% endexample %}
|