Radio switch
Fields subject to change from example: name
, id
, value
. Use checked
property for setting default checked option
<div class="form-control-radio-switch">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="inlineRadio1"
value="option1"
checked />
<label class="form-check-label" for="inlineRadio1">Alla</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="inlineRadio2"
value="option2" />
<label class="form-check-label" for="inlineRadio2">Begagnat</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="inlineRadio3"
value="option3" />
<label class="form-check-label" for="inlineRadio3">Nytt/Oanvänt</label>
</div>
</div>
Prevent text from being truncated
Radio switch items will by default clip its content when its too big.
The class form-check-inline-noclip
will prevent this from happening. See item 3 below
<div class="form-control-radio-switch">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="sizingInlineRadioOptions"
id="inlineRadio2-1"
value="option1"
checked />
<label class="form-check-label" for="inlineRadio2-1">Alla</label>
</div>
<div class="form-check form-check-inline form-check-inline-lg">
<input
class="form-check-input"
type="radio"
name="sizingInlineRadioOptions"
id="inlineRadio2-2"
value="option2" />
<label class="form-check-label" for="inlineRadio2-2">Begagnat</label>
</div>
<div class="form-check form-check-inline form-check-inline-noclip">
<input
class="form-check-input"
type="radio"
name="sizingInlineRadioOptions"
id="inlineRadio2-3"
value="option3" />
<label class="form-check-label" for="inlineRadio2-3"
>Nytt/Oanvänt</label
>
</div>
</div>