Link copied!

Radio Button Examples

<e-radio name="r1"></e-radio>
<e-radio name="r1" checked></e-radio>
<div class="e-field">
  <span class="e-field__label">
    Radio Button Group Label
  </span>
  <ul class="e-list">
    <li class="e-list__item">
      <e-radio name="r2" label="Radio Label 1"></e-radio>
    </li>
    <li class="e-list__item">
      <e-radio name="r2" label="Radio Label 2" checked></e-radio>
    </li>
  </ul>
</div>
<div class="e-field">
  <span class="e-field__label">
    Radio Button Group Label
  </span>
  <ul class="e-list">
    <li class="e-list__item">
      <e-radio name="r2" label="Radio Label 1" disabled></e-radio>
    </li>
    <li class="e-list__item">
      <e-radio name="r2" label="Radio Label 2" disabled checked></e-radio>
    </li>
  </ul>
</div>
<div class="e-field">
  <span class="e-field__label">
    Radio Button Group Label
  </span>
  <ul class="e-list">
    <li class="e-list__item">
      <e-radio name="r2" label="Radio Label Error" checked type="error"></e-radio>
    </li>
    <li class="e-list__item">
      <e-radio name="r2" label="Radio Label Success" type="success"></e-radio>
    </li>
    <li class="e-list__item">
      <e-radio name="r2" label="Radio Label Warning" type="warning"></e-radio>
    </li>
    <li class="e-list__item">
      <e-radio name="r2" label="Radio Label Info" type="info"></e-radio>
    </li>
  </ul>
</div>
<div class="e-field">
  <label class="e-field__label">
    Radio Button Group Label
  </label>
  <ul class="e-list">
    <li class="e-list__item">
      <input class="e-radio" type="radio" name="chb1" id="chb1.1" checked>
      <label for="chb1.1">
        Radio Label 1
      </label>
    </li>
    <li class="e-list__item">
      <input class="e-radio" type="radio" name="chb1" id="chb1.2">
      <label for="chb1.2">
        Radio Label 2
      </label>
    </li>
  </ul>
</div>
<div class="e-field">
  <label class="e-field__label">
    Radio Button Group Label
  </label>
  <ul class="e-list">
    <li class="e-list__item">
      <input class="e-radio" type="radio" name="chb2" id="chb2.1" checked disabled>
      <label for="chb2.1">
        Radio Label 1
      </label>
    </li>
    <li class="e-list__item">
      <input class="e-radio" type="radio" name="chb2" id="chb2.2" disabled>
      <label for="chb2.2">
        Radio Label 2
      </label>
    </li>
  </ul>
</div>
<div class="e-field">
  <label class="e-field__label">
    Radio Button Group Label
  </label>
  <ul class="e-list">
    <li class="e-list__item">
      <input class="e-radio e-input-error" type="radio" name="chb3" id="chb3.1" checked>
      <label for="chb3.1">
        Radio Label 1
      </label>
    </li>
    <li class="e-list__item">
      <input class="e-radio e-input-error" type="radio" name="chb3" id="chb3.2">
      <label for="chb3.2">
        Radio Label 2
      </label>
    </li>
  </ul>
</div>
<div class="e-row">
  <div class="e-col-3">
    <div class="e-field">
      <label class="e-field__label">
        Radio Button Group Label
      </label>
      <ul class="e-list">
        <li class="e-list__item">
          <input class="e-radio e-radio-block" type="radio" name="chb4" id="chb4.1" checked>
          <label for="chb4.1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit
          </label>
        </li>
        <li class="e-list__item">
          <input class="e-radio" type="radio" name="chb4" id="chb4.2">
          <label for="chb4.2">
            Aliquam hendrerit turpis quis interdum porttitor
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>