1.0.0 • Published 3 years ago
@miraidesigns/radio v1.0.0
Radio Buttons
Radio buttons allow users to select one option from a set of options.
HTML
<div class="mdf-radio">
<input id="radio" class="mdf-radio__input" type="radio">
<div class="mdf-radio__circle"></div>
</div>
Sass
// Include default styles without configuration
@forward '@miraidesigns/radio/styles';
// Configure appearance
@use '@miraidesigns/radio' with (
$variable: value
);
@include radio.styles();
Examples
Some basic examples on how the module can be used.
Labels
To ensure proper alignment, wrap the radio button and label element inside a .mdf-control
element.
<div class="mdf-control">
<div class="mdf-radio">
<input id="option-1" class="mdf-radio__input" type="radio" name="options">
<div class="mdf-radio__circle"></div>
</div>
<label for="option-1">Option #1</label>
</div>
<div class="mdf-control">
<div class="mdf-radio">
<input id="option-2" class="mdf-radio__input" type="radio" name="options">
<div class="mdf-radio__circle"></div>
</div>
<label for="option-2">Option #2</label>
</div>
Implementation
Classes
Name | Type | Description |
---|---|---|
mdf-control | Parent | Wraps the radio and label element |
mdf-radio | Parent | Radio container element |
mdf-radio--disabled | Modifier | Fades out the element and disabled all interaction |
mdf-radio__input | Child | Input element, visually hidden. Used to determine the :checked state. Child to .mdf-radio |
mdf-radio__circle | Child | The circle icon. Child to .mdf-radio |
1.0.0
3 years ago