Radio

Default
.e-radio 

<div class="e-field">
  <label class="e-field__label">
    Clear group label
  </label>
  <ul class="e-list">
    <li class="e-list__item">
      <input type="radio" name="chb1" id="chb1.1" checked class="e-radio">
      <label for="chb1.1">
        Radio label
      </label>
    </li>
    <li class="e-list__item">
      <input type="radio" name="chb1" id="chb1.2" class="e-radio">
      <label for="chb1.2">
        Radio label
      </label>
    </li>
  </ul>
</div>


                        <div class="e-field">
                          <label class="e-field__label">Clear group label</label>
                          <ul class="e-list">
                            <li class="e-list__item">
                              <input type="radio" name="chb1" id="chb1.1" checked class="e-radio">
                              <label for="chb1.1">Radio label</label>
                            </li>
                            <li class="e-list__item">
                              <input type="radio" name="chb1" id="chb1.2" class="e-radio">
                              <label for="chb1.2">Radio label</label>
                            </li>
                          </ul>
                        </div>

Variations

Disabled
:disabled 

<div class="e-field">
  <label class="e-field__label">
    Clear group label
  </label>
  <ul class="e-list">
    <li class="e-list__item">
      <input type="radio" name="chb2" id="chb2.1" checked disabled class="e-radio">
      <label for="chb2.1">
        Radio label
      </label>
    </li>
    <li class="e-list__item">
      <input type="radio" name="chb2" id="chb2.2" disabled class="e-radio">
      <label for="chb2.2">
        Radio label
      </label>
    </li>
  </ul>
</div>


                          <div class="e-field">
                            <label class="e-field__label">Clear group label</label>
                            <ul class="e-list">
                              <li class="e-list__item">
                                <input type="radio" name="chb2" id="chb2.1" checked disabled class="e-radio">
                                <label for="chb2.1">Radio label</label>
                              </li>
                              <li class="e-list__item">
                                <input type="radio" name="chb2" id="chb2.2" disabled class="e-radio">
                                <label for="chb2.2">Radio label</label>
                              </li>
                            </ul>
                          </div>

Error
.e-input-error 

<div class="e-field">
  <label class="e-field__label">
    Clear group label
  </label>
  <ul class="e-list">
    <li class="e-list__item">
      <input type="radio" name="chb3" id="chb3.1" checked class="e-radio e-input-error">
      <label for="chb3.1">
        Radio label
      </label>
    </li>
    <li class="e-list__item">
      <input type="radio" name="chb3" id="chb3.2" class="e-radio">
      <label for="chb3.2">
        Radio label
      </label>
    </li>
  </ul>
</div>


                          <div class="e-field">
                            <label class="e-field__label">Clear group label</label>
                            <ul class="e-list">
                              <li class="e-list__item">
                                <input type="radio" name="chb3" id="chb3.1" checked class="e-radio e-input-error">
                                <label for="chb3.1">Radio label</label>
                              </li>
                              <li class="e-list__item">
                                <input type="radio" name="chb3" id="chb3.2" class="e-radio">
                                <label for="chb3.2">Radio label</label>
                              </li>
                            </ul>
                          </div>

Block
.e-radio-block 

<div class="e-row">
  <div class="e-col-3">
    <div class="e-field">
      <label class="e-field__label">
        Clear group label
      </label>
      <ul class="e-list">
        <li class="e-list__item">
          <input type="radio" name="chb4" id="chb4.1" checked class="e-radio e-radio-block">
          <label for="chb4.1">
            Block label Block label Block label Block label Block label Block label
          </label>
        </li>
        <li class="e-list__item">
          <input type="radio" name="chb4" id="chb4.2" class="e-radio">
          <label for="chb4.2">
            Normal label Normal label Normal label Normal label Normal label Normal
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-3">
                              <div class="e-field">
                                <label class="e-field__label">Clear group label</label>
                                <ul class="e-list">
                                  <li class="e-list__item">
                                    <input type="radio" name="chb4" id="chb4.1" checked class="e-radio e-radio-block">
                                    <label for="chb4.1">Block label Block label Block label Block label Block label Block label</label>
                                  </li>
                                  <li class="e-list__item">
                                    <input type="radio" name="chb4" id="chb4.2" class="e-radio">
                                    <label for="chb4.2">Normal label Normal label Normal label Normal label Normal label Normal</label>
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>

Related components

CheckboxSwitchButton radio

Radio

When to use radio?

Radio (buttons) are for selecting one of a group of possible items, like alternatives or choices.

When selecting between two items (like on / off), consider using the Switch component instead.

Guidelines

When you add a new radio to the UI, it should pass each of the following guidelines. You must have a strong reason to break any of these.

  1. With radio the user should be able to select only one option, it can't be used for multi selection.
  2. Always create radio buttons in vertical form, this strengthens the connection between the items, doesn't hide options, and allows the user to see easily what is selected.
  3. Radio buttons should have a clear group label the describes what the selection is about.
  4. Each item should be clearly labelled with a few words in a single line of sentence style text. The users should never wonder what the choices mean.
  5. Position the choice labels to the right of the selectors.
  6. Keep number of items at a maximum of 8. Adding more items increases screen clutter, consider using a drop down instead.
  7. Order of the items should follow an intended logic, for example frequency of use or alphabetical sorting.
  8. Consider adding a default choice that would fit the most frequent use case. If there is a default option, it should be the first.

Last update

Message feat(components): use stylelint rules
Date:
()
Committer: rudywaltz
Component history