Dealogic Styleguide

section menu

Radio & Checkbox

Radio and Checkbox inputs can be used for pre-defined data-selection.

  • Radio Group: A select list that can have a single entry checked at any one time.
  • Checkbox Group: A select list that can have a multiples entries checked at any one time.

Examples

Radio Inputs

A select list that can have a single entry checked at any one time. 

<label class="dl-radio">
  <input type="radio" name="name" value="1" disabled />
  <span class="label">Disabled label</span>
</label>

<label class="dl-radio">
  <input type="radio" name="name" value="2" />
  <span class="label">Radio label</span>
</label>

<label class="dl-radio">
  <input type="radio" name="name" value="3" checked />
  <span class="label">Checked label</span>
</label>

Checkbox Inputs

A select list that can have a multiples entries checked at any one time. 

<label class="dl-checkbox">
  <input type="checkbox" name="name" value="2" disabled />
  <span class="label">Disabled label</span>
</label>

<label class="dl-checkbox">
  <input type="checkbox" name="name" value="1" />
  <span class="label">Default label</span>
</label>

<label class="dl-checkbox">
  <input type="checkbox" name="name" value="3" checked />
  <span class="label">Checked label</span>
</label>

Checkbox with Color Key

A select list that can have a multiples entries checked at any one time, with a colour key. 

<label class="dl-checkbox">
  <input type="checkbox" name="name" value="1" />
  <span class="label">
    Label with color key
    <dl-status-badge color="#006fd1"></dl-status-badge>
  </span>
</label>

<label class="dl-checkbox">
  <input type="checkbox" name="name" value="2" />
  <span class="label">
    Label with color key
    <dl-status-badge color="#009404"></dl-status-badge>
  </span>
</label>

<label class="dl-checkbox">
  <input type="checkbox" name="name" value="3" />
  <span class="label">
    Label with color key
    <dl-status-badge color="#d80000"></dl-status-badge>
  </span>
</label>