With Label
| Class | Example |
|---|---|
|
.mdst-radio-label .mdst-radio |
|
| checked | |
| disabled |
Radio Group
| Class | Example |
|---|---|
| .mdst-radio-group |
|
| .mdst-radio-group--horizontal |
|
Standalone
| Class | Example |
|---|---|
| .mdst-radio |
Radio Card
| Class | Example |
|---|---|
|
.mdst-radio-card-group .mdst-radio-card |
|
| disabled |
|
Usage
<!-- With label (recommended) -->
<label class="mdst-radio-label">
<input type="radio" name="group" class="mdst-radio" />
Label text
</label>
<!-- Radio group (vertical) -->
<div class="mdst-radio-group">
<label class="mdst-radio-label">
<input type="radio" name="group" class="mdst-radio" checked />
Option 1
</label>
<label class="mdst-radio-label">
<input type="radio" name="group" class="mdst-radio" />
Option 2
</label>
</div>
<!-- Radio group (horizontal) -->
<div class="mdst-radio-group mdst-radio-group--horizontal">
...
</div>
<!-- Radio card -->
<div class="mdst-radio-card-group">
<label class="mdst-radio-card">
<input type="radio" name="group" class="mdst-radio" checked />
Any content here
</label>
<label class="mdst-radio-card">
<input type="radio" name="group" class="mdst-radio" />
Any content here
</label>
</div>