Radio button inline
Default
<div class="form-field form-field--inline">
<input type="radio" id="1" name="radio-inputs-1-2" class="" value="Yes">
<label for="1" class="">Yes</label>
</div>
<div class="form-field form-field--inline">
<input type="radio" id="2" name="radio-inputs-1-2" class="" value="No">
<label for="2" class="">No</label>
</div>
Selected
<div class="form-field form-field--inline">
<input type="radio" id="3" name="radio-inputs-3-4" class="" value="Yes">
<label for="3" class="">Yes</label>
</div>
<div class="form-field form-field--inline">
<input type="radio" id="4" name="radio-inputs-3-4" class="" value="No" checked>
<label for="4" class="">No</label>
</div>
Introduction
The UIF inputs expect short labels that don't wrap onto the next line. This shows the preferred styling and usage of the inputs when used in a form.
Usage
Class name | Effect | Remarks |
---|---|---|
.form-field--inline |
Modifier placed on the .form-field to make the fields display inline instead of taking up the full container width. |
Optional. |