19 #Radio Radio
19.1 #Radio.default Default Radio Button
.sf-radio
Html
<div class="sf-radio">
<input type="radio" class="sf-radio__input" name="navigation" id="radio_1"/>
<label class="sf-radio__label" for="radio_1">
<span class="sf-radio__icon"></span>
<span class="sf-radio__text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
</label>
</div>
<div class="sf-radio">
<input type="radio" class="sf-radio__input" name="navigation" id="radio_2" disabled />
<label class="sf-radio__label" for="radio_2">
<span class="sf-radio__icon"></span>
<span class="sf-radio__text">Radio label</span>
</label>
</div>
<div class="sf-radio">
<input type="radio" class="sf-radio__input" name="navigation" id="radio_3" checked/>
<label class="sf-radio__label" for="radio_3">
<span class="sf-radio__icon"></span>
<span class="sf-radio__text">Radio label</span>
</label>
</div>19.2 #Radio.Ellipsis Radio Button Ellipsis
.sf-radio.-ellipsis
Html
<div style="width: 100px">
<div class="sf-radio -ellipsis">
<input type="radio" class="sf-radio__input" name="navigation2" id="radio_6" />
<label class="sf-radio__label" for="radio_6">
<span class="sf-radio__icon"></span>
<span class="sf-radio__text">Radio label ellipsis</span>
</label>
</div>
</div>19.3 #Radio.without-label Radio Button Without a Label
.sf-radio
Html
<div class="sf-radio">
<input type="radio" class="sf-radio__input" name="navigation1" id="radio_5" checked />
<label class="sf-radio__label" for="radio_5">
<span class="sf-radio__icon"></span>
</label>
</div>