Radio buttons
Radio button component. Use it when the user need to select a value from multiple choises (typically 3-7).
- Default
- Inverse
<label class="lui-radiobutton">
<input class="lui-radiobutton__input" type="radio" aria-label="First button" name="myradio" value="1" checked>
<div class="lui-radiobutton__radio-wrap">
<span class="lui-radiobutton__radio"></span>
<span class="lui-radiobutton__radio-text">First button</span>
</div>
</label>
<label class="lui-radiobutton">
<input class="lui-radiobutton__input" type="radio" aria-label="Second button" name="myradio" value="2">
<div class="lui-radiobutton__radio-wrap">
<span class="lui-radiobutton__radio"></span>
<span class="lui-radiobutton__radio-text">Second button</span>
</div>
</label>
<label class="lui-radiobutton">
<input class="lui-radiobutton__input" type="radio" aria-label="Third button" name="myradiodisabled" value="3" disabled checked>
<div class="lui-radiobutton__radio-wrap">
<span class="lui-radiobutton__radio"></span>
<span class="lui-radiobutton__radio-text">Third button</span>
</div>
</label>
<label class="lui-radiobutton">
<input class="lui-radiobutton__input" type="radio" aria-label="Fourth button" name="myradiodisabled" value="4" disabled>
<div class="lui-radiobutton__radio-wrap">
<span class="lui-radiobutton__radio"></span>
<span class="lui-radiobutton__radio-text">Fourth button</span>
</div>
</label>
<label class="lui-radiobutton lui-radiobutton--inverse">
<input class="lui-radiobutton__input" type="radio" aria-label="First button" name="mydarkradio" value="1" checked>
<div class="lui-radiobutton__radio-wrap">
<span class="lui-radiobutton__radio"></span>
<span class="lui-radiobutton__radio-text">First button</span>
</div>
</label>
<label class="lui-radiobutton lui-radiobutton--inverse">
<input class="lui-radiobutton__input" type="radio" aria-label="Second button" name="mydarkradio" value="2">
<div class="lui-radiobutton__radio-wrap">
<span class="lui-radiobutton__radio"></span>
<span class="lui-radiobutton__radio-text">Second button</span>
</div>
</label>
<label class="lui-radiobutton lui-radiobutton--inverse">
<input class="lui-radiobutton__input" type="radio" aria-label="Third button" name="mydarkradiodisabled" value="3" disabled checked>
<div class="lui-radiobutton__radio-wrap">
<span class="lui-radiobutton__radio"></span>
<span class="lui-radiobutton__radio-text">Third button</span>
</div>
</label>
<label class="lui-radiobutton lui-radiobutton--inverse">
<input class="lui-radiobutton__input" type="radio" aria-label="Fourth button" name="mydarkradiodisabled" value="4" disabled>
<div class="lui-radiobutton__radio-wrap">
<span class="lui-radiobutton__radio"></span>
<span class="lui-radiobutton__radio-text">Fourth button</span>
</div>
</label>