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.