Radio-Button

TIP

Radio Buttons are used to select one option from a list of options. If you want to allow multiple selections, use checkboxes instead.

WARNING

A11Y TODO: show more prominent focus-visible state.

.c-radio

Checked and Unchecked

Add the attribute checked

I'm checked

I'm unchecked

Show Code

<div class="c-radio">
  <input id="i2" type="radio" checked>
  <label for="i2">I'm checked</label>
</div>
<div class="c-radio">
  <input id="i1" type="radio">
  <label for="i1">I'm unchecked</label>
</div>

Disabled Radio-Button

Add the attribute disabled="disabled"

I'm a bit disabled but checked

I'm only disabled

Show Code

<div class="c-radio h-block">
  <input id="i4" type="radio" disabled="disabled" checked>
  <label for="i4">I'm a bit disabled but checked</label>
</div>
<div class="c-radio h-block">
  <input id="i5" type="radio" disabled="disabled">
  <label for="i5">I'm only disabled</label>
</div>

Small Radio-Button

Add the modifier class -small"

I'm a small radio box

Show Code

<div class="c-radio -small">
  <input id="i4" type="radio" checked>
  <label for="i4">I'm a small radio box </label>
</div>

Horizontal Layout

Use the helper-class .h-inline-block

I'm in line

I'm in line

I'm in line

Show Code

<div class="c-radio h-inline-block">
  <input id="ci3" type="radio" name="radio-inline-group" checked>
  <label for="ci3">I'm in line</label>
</div>
<div class="c-radio h-inline-block">
  <input id="ci4" type="radio" name="radio-inline-group">
  <label for="ci4">I'm in line</label>
</div>
<div class="c-radio h-inline-block">
  <input id="ci7" type="radio" name="radio-inline-group">
  <label for="ci7">I'm in line</label>
</div>

Centering an inline radio

I'm totally centered

Show Code

<div class="h-type-align-center h-block">
  <div class="c-radio h-inline-block">
    <input id="ci10" type="radio">
    <label for="ci10">I'm totally centered</label>
  </div>
</div>

Radio-Button Group with Label

.c-float-container.-radio

Label

Option 1

Option 2

Option 3

Show Code

<div class="c-float-container -has-radio">
  <label class="c-label">Label</label>
  <div class="c-radio h-inline-block">
    <input id="m1" type="radio" name="radio-group">
    <label for="m1">Option 1</label>
  </div>
  <div class="c-radio h-inline-block">
    <input id="m2" type="radio" name="radio-group">
    <label for="m2">Option 2</label>
  </div>
  <div class="c-radio h-inline-block">
    <input id="m4" type="radio" name="radio-group">
    <label for="m4">Option 3</label>
  </div>
</div>

Radio-Button States

.c-radio[.-success, .-error]

Option 1

Option 2

Show Code

<div class="c-radio -success h-inline-block">
  <input id="success-1" type="radio" name="radio-group-states">
  <label for="success-1">Option 1</label>
</div>
<div class="c-radio -error h-inline-block">
  <input id="error-1" type="radio" name="radio-group-states">
  <label for="error-1">Option 2</label>
</div>