UI Components

Radio Buttons

Radio Buttons column

Example

  <label class="o-formControl-label " for="radio1Column">
    <input class="o-formControl-input" type="radio" id="radio1Column" name="sortbyColumn" value="radio1" {$ASYNCID$1$7212$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 1
  </label>
  <label class="o-formControl-label " for="radio2Column">
    <input class="o-formControl-input" type="radio" id="radio2Column" name="sortbyColumn" value="radio2" {$ASYNCID$1$7214$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 2
  </label>
  <label class="o-formControl-label " for="radio3Column">
    <input class="o-formControl-input" type="radio" id="radio3Column" name="sortbyColumn" value="radio3" {$ASYNCID$1$7216$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 3
  </label>
  <label class="o-formControl-label " for="radio4Column">
    <input class="o-formControl-input" type="radio" id="radio4Column" name="sortbyColumn" value="radio4" {$ASYNCID$1$7218$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 4
  </label>
  <label class="o-formControl-label " for="radio5Column">
    <input class="o-formControl-input" type="radio" id="radio5Column" name="sortbyColumn" value="radio5" {$ASYNCID$1$7220$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 5
  </label>

Radio Buttons inline

Example

  <label class="o-formControl-label o-formControl-label--inline" for="radio1Inline">
    <input class="o-formControl-input" type="radio" id="radio1Inline" name="sortbyInline" value="radio1" {$ASYNCID$1$7222$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 1
  </label>
  <label class="o-formControl-label o-formControl-label--inline" for="radio2Inline">
    <input class="o-formControl-input" type="radio" id="radio2Inline" name="sortbyInline" value="radio2" {$ASYNCID$1$7224$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 2
  </label>
  <label class="o-formControl-label o-formControl-label--inline" for="radio3Inline">
    <input class="o-formControl-input" type="radio" id="radio3Inline" name="sortbyInline" value="radio3" {$ASYNCID$1$7226$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 3
  </label>
  <label class="o-formControl-label o-formControl-label--inline" for="radio4Inline">
    <input class="o-formControl-input" type="radio" id="radio4Inline" name="sortbyInline" value="radio4" {$ASYNCID$1$7228$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 4
  </label>
  <label class="o-formControl-label o-formControl-label--inline" for="radio5Inline">
    <input class="o-formControl-input" type="radio" id="radio5Inline" name="sortbyInline" value="radio5" {$ASYNCID$1$7230$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 5
  </label>

Radio Buttons column & disabled

Example

  <label class="o-formControl-label " for="radio1ColumnDisabled">
    <input class="o-formControl-input" type="radio" id="radio1ColumnDisabled" name="sortbyColumnDisabled" value="radio1" {$ASYNCID$1$7232$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 1
  </label>
  <label class="o-formControl-label " for="radio2ColumnDisabled">
    <input class="o-formControl-input" type="radio" id="radio2ColumnDisabled" name="sortbyColumnDisabled" value="radio2" {$ASYNCID$1$7234$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 2
  </label>
  <label class="o-formControl-label " for="radio3ColumnDisabled">
    <input class="o-formControl-input" type="radio" id="radio3ColumnDisabled" name="sortbyColumnDisabled" value="radio3" {$ASYNCID$1$7236$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 3
  </label>
  <label class="o-formControl-label " for="radio4ColumnDisabled">
    <input class="o-formControl-input" type="radio" id="radio4ColumnDisabled" name="sortbyColumnDisabled" value="radio4" {$ASYNCID$1$7238$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 4
  </label>
  <label class="o-formControl-label " for="radio5ColumnDisabled">
    <input class="o-formControl-input" type="radio" id="radio5ColumnDisabled" name="sortbyColumnDisabled" value="radio5" {$ASYNCID$1$7240$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 5
  </label>

Radio Buttons inline & disabled

Example

  <label class="o-formControl-label o-formControl-label--inline" for="radio1InlineDisabled">
    <input class="o-formControl-input" type="radio" id="radio1InlineDisabled" name="sortbyInlineDisabled" value="radio1" {$ASYNCID$1$7242$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 1
  </label>
  <label class="o-formControl-label o-formControl-label--inline" for="radio2InlineDisabled">
    <input class="o-formControl-input" type="radio" id="radio2InlineDisabled" name="sortbyInlineDisabled" value="radio2" {$ASYNCID$1$7244$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 2
  </label>
  <label class="o-formControl-label o-formControl-label--inline" for="radio3InlineDisabled">
    <input class="o-formControl-input" type="radio" id="radio3InlineDisabled" name="sortbyInlineDisabled" value="radio3" {$ASYNCID$1$7246$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 3
  </label>
  <label class="o-formControl-label o-formControl-label--inline" for="radio4InlineDisabled">
    <input class="o-formControl-input" type="radio" id="radio4InlineDisabled" name="sortbyInlineDisabled" value="radio4" {$ASYNCID$1$7248$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 4
  </label>
  <label class="o-formControl-label o-formControl-label--inline" for="radio5InlineDisabled">
    <input class="o-formControl-input" type="radio" id="radio5InlineDisabled" name="sortbyInlineDisabled" value="radio5" {$ASYNCID$1$7250$} />
    <span class="o-formControl-indicator o-formControl-indicator--radio"></span>
    Radio 5
  </label>