V6 Clearleft Patterns

Radio Buttons 

<div class="Radio-buttons flow">
    <p class="Radio-buttons__title small">Budget</p>

    <div class="Radio-buttons__group">
        <div class="Radio">
            <input class="Radio__input" type="radio" id="na" name="button" value="N/A" checked>
            <label class="Radio__label small" for="na">N/A</label>
            <span class="Radio__check"></span>
        </div>
        <div class="Radio">
            <input class="Radio__input" type="radio" id="50k" name="button" value="up to £50k">
            <label class="Radio__label small" for="50k">up to £50k</label>
            <span class="Radio__check"></span>
        </div>
        <div class="Radio">
            <input class="Radio__input" type="radio" id="100k" name="button" value="£50 - £100k">
            <label class="Radio__label small" for="100k">£50 - £100k</label>
            <span class="Radio__check"></span>
        </div>
        <div class="Radio">
            <input class="Radio__input" type="radio" id="250k" name="button" value="£100 - £250k">
            <label class="Radio__label small" for="250k">£100 - £250k</label>
            <span class="Radio__check"></span>
        </div>
        <div class="Radio">
            <input class="Radio__input" type="radio" id="plus" name="button" value="£250k+">
            <label class="Radio__label small" for="plus">£250k+</label>
            <span class="Radio__check"></span>
        </div>
    </div>

</div>
 
<div class="Radio-buttons flow">
 <p class="Radio-buttons__title small">{{title}}</p>

 <div class="Radio-buttons__group">
  {% for button in buttons %}
   <div class="Radio">
    <input class="Radio__input" type="radio" id="{{button.id}}" name="{{name}}" value="{{button.label}}" {% if button.checked is defined and button.checked %}checked{% endif %} {% if required %}required{% endif %}>
    <label class="Radio__label small" for="{{button.id}}">{{button.label}}</label>
    <span class="Radio__check"></span>
   </div>
  {% endfor %}
 </div>

</div>
 
{
  "title": "Budget",
  "name": "button",
  "buttons": [
    {
      "label": "N/A",
      "id": "na",
      "checked": true
    },
    {
      "label": "up to £50k",
      "id": "50k"
    },
    {
      "label": "£50 - £100k",
      "id": "100k"
    },
    {
      "label": "£100 - £250k",
      "id": "250k"
    },
    {
      "label": "£250k+",
      "id": "plus"
    }
  ]
}
  • Content: 
    .Radio-buttons {
  > * {
    --flow: 0.5rem;
  }

  &__title {
    font-weight: bold;
  }

  &__group {
    display: flex;
    flex-wrap: wrap;
  }

  .Radio {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 0.3rem;
    margin-right: 0.3rem;

    &__input {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

    &__check {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      border: 2px solid var(--dark);
      transition: border 0.3s ease-out;
      pointer-events: none;
      overflow: hidden;
      border-radius: 6px;
    }

    &__label {
      display: block;
      position: relative;
      cursor: pointer;
      padding: 0.5rem 1rem;
      z-index: 1;
      font-weight: bold;
    }

    &__check:after {
      content: '';
      background-color: var(--dark);
      position: absolute;
      transform: scaleX(0);
      transform-origin: left;
      top: 0;
      left: 0;
      /* optical adjustment - subpixel bug */
      right: -4px;
      width: 107%;
      height: 100%;
      z-index: 0;
    }

    &__input:checked ~ span:after {
      transition: all 0.18s var(--confident-ease);
      opacity: 1;
      transform: scale(1);
    }

    &__input:checked ~ label,
    &__input:focus ~ label {
      color: var(--white);
    }
  }
}

@media screen and (min-width: 62.5rem) {
  .Radio-buttons {
    &__group > * + * {
      .Radio__check {
        border-left: none;
      }
    }

    &__group {
      flex-wrap: nowrap;
    }

    .Radio {
      margin: 0;
      &__check {
        border-radius: 0;
      }
    }

    .Radio:first-child {
      .Radio__check {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
      }
    }

    .Radio:last-child {
      .Radio__check {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
      }
    }
  }
}
  • URL: /components/raw/radio-buttons/radio-buttons.css
  • Filesystem Path: src/templates/components/radio-buttons/radio-buttons.css
  • Size: 2.1 KB

No notes defined.