2.31 #Components.RadioInput Radio Input
Niestandardowy radio z ukrytym natywnym inputem i okrągłym indicatorem. Stany: checked, disabled, error, blocked, focus.
Examples
Default styling
.radio-input--error
Border czerwony (walidacja)
.radio-input--blocked
Zablokowany (szary, wybrany, nie do odhaczenia)
Markup: radio-input.html
<div style="display: flex; gap: 24px; flex-wrap: wrap;">
<label class="radio-input">
<input type="radio" class="radio-input__control" name="demo" />
<span class="radio-input__indicator"></span>
<span class="radio-input__label">Default</span>
</label>
<label class="radio-input">
<input type="radio" class="radio-input__control" name="demo" checked />
<span class="radio-input__indicator"></span>
<span class="radio-input__label">Selected</span>
</label>
<label class="radio-input">
<input type="radio" class="radio-input__control" name="demo2" disabled />
<span class="radio-input__indicator"></span>
<span class="radio-input__label">Disabled</span>
</label>
<label class="radio-input radio-input--error">
<input type="radio" class="radio-input__control" name="demo3" />
<span class="radio-input__indicator"></span>
<span class="radio-input__label">Error</span>
</label>
<label class="radio-input radio-input--blocked">
<input type="radio" class="radio-input__control" name="demo4" checked />
<span class="radio-input__indicator"></span>
<span class="radio-input__label">Blocked</span>
</label>
</div>
Source:
src/scss/components/_radio-input.scss, line 1