Lehigh Clutch Style Guide

Forms: Radio Button List 

<div class="form-item">
    <legend class="legend">This is the legend</legend>
    <ul class="radiobutton-list">
        <li class="form-item--radio__item">
            <label for="radio1">
                <input id="radio1" name="radio" type="radio" class="radio"> Option 1
            </label>
        </li>
        <li class="form-item--radio__item">
            <label for="radio2">
                <input id="radio2" name="radio" type="radio" class="radio"> Option 2
            </label>
        </li>
        <li class="form-item--radio__item">
            <label for="radio3">
                <input id="radio3" name="radio" type="radio" class="radio"> Option 3
            </label>
        </li>
        <li class="form-item--radio__item">
            <label for="radio4">
                <input id="radio4" name="radio" type="radio" class="radio"> Option 4
            </label>
        </li>
    </ul>
</div>
 
<div class="form-item">
    {% if rb_legend %}
        <legend class="legend">{{ rb_legend }}</legend>
    {% endif %}
    <ul class="radiobutton-list">
        {% for rb_item in rb_items %}
            <li class="form-item--radio__item">
                <label for="radio{{ rb_item.key }}">
                    <input id="radio{{ rb_item.key }}" name="radio" type="radio" class="radio" {% if list_item.checked %}checked="checked"{% endif %}> {{ rb_item.item }}
                </label>
            </li>
        {% endfor %}
    </ul>
</div>
 
{
  "legend": "This is the legend",
  "list_items": {
    "1": {
      "key": 1,
      "item": "Option 1"
    },
    "2": {
      "key": 2,
      "checked": "checked",
      "item": "Option 2"
    },
    "3": {
      "key": 3,
      "item": "Option 3"
    },
    "4": {
      "key": 4,
      "checked": "checked",
      "item": "Option 4"
    }
  },
  "rb_legend": "This is the legend",
  "rb_items": {
    "1": {
      "key": 1,
      "item": "Option 1"
    },
    "2": {
      "key": 2,
      "item": "Option 2"
    },
    "3": {
      "key": 3,
      "item": "Option 3"
    },
    "4": {
      "key": 4,
      "item": "Option 4"
    }
  }
}
  • Content: 
    .checkbox-list,
.radiobutton-list{
  @include reset-list-nav;
}

.form-item {
  margin: $spacer 0;

  // &:first-of-type {
  //   margin: 0 0 $spacer 0;
  // }

  // &:last-of-type {
  //   margin: $spacer 0 0 0;
  // }
}

.form-item__select,
input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=number],
textarea {
  font-size: 1rem;
}

.search-name {
  position: relative;

  .search-name-box {
    min-width: 300px;
    background: transparent url(../images/search-icon.jpg) no-repeat 98% center;
    background-size: 25px auto;
    height: 30px;

    .color-scheme-dark & {
      color: $white;
    }
  }

  #search-name-submit {
    -webkit-appearance: none;
    box-sizing: inherit;
    padding: 0;
    border-width: 0;
    border-style: none;
    border-color: inherit;
    border-image: none;
    color: transparent;
    position: absolute;
    left: 250px;
    top: 1px;
    width: 55px;
    height: 30px;
    background-color: transparent;
  }
}

form {
  .hidden {
    visibility: hidden;
  }
}

.form-login {
  .color-scheme-dark & {
    background-color: $dark_mode_grey !important;
  }
}

.webform-scale {
  .form-type-radio {
    border-top: 0;

    &:last-of-type {
      border-bottom: 0;
      padding: 0 !important;
    }
  }
}

.webform-button--submit {
  margin: $spacer 0 0 0;
}

.draggable {
  a {
    &.tabledrag-handle {
      border-bottom: none;

      .handle {
        width: 25px;
        height: 25px;
      }
    }
  }
}

.custom-range {
  height: unset;
}

.form-type-range {
  .form-type-number {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
}

.form-wrapper {
  summary {
    &::before {
      content: unset;
    }
  }
}
  • URL: /components/raw/forms/forms.scss
  • Filesystem Path: bits/02-general/forms/forms.scss
  • Size: 1.7 KB

Show list of radio buttons.