V6 Clearleft Patterns

Checkboxes 

<div class="Checkboxes flow">
    <p class="Checkboxes__title small">Let us know what you would like help with?</p>

    <div class="Checkboxes__group">
        <div class="Checkbox">
            <input class="Checkbox__input" type="checkbox" id="explore" name="checkboxform[]" value="Explore">
            <label class="Checkbox__label small" for="explore">Explore</label>
            <span class="Checkbox__check"></span>
        </div>
        <div class="Checkbox">
            <input class="Checkbox__input" type="checkbox" id="create" name="checkboxform[]" value="Create">
            <label class="Checkbox__label small" for="create">Create</label>
            <span class="Checkbox__check"></span>
        </div>
        <div class="Checkbox">
            <input class="Checkbox__input" type="checkbox" id="grow" name="checkboxform[]" value="Grow">
            <label class="Checkbox__label small" for="grow">Grow</label>
            <span class="Checkbox__check"></span>
        </div>
    </div>

</div>
 
<div class="Checkboxes flow">
 <p class="Checkboxes__title small">{{title}}</p>

 <div class="Checkboxes__group">
  {% for checkbox in checkboxes %}
   <div class="Checkbox">
    <input class="Checkbox__input" type="checkbox" id="{{checkbox.id}}" name="{{name}}" value="{{checkbox.label}}" {% if required %}required{% endif %}>
    <label class="Checkbox__label small" for="{{checkbox.id}}">{{checkbox.label}}</label>
    <span class="Checkbox__check"></span>
   </div>
  {% endfor %}
 </div>

</div>
 
{
  "title": "Let us know what you would like help with?",
  "name": "checkboxform[]",
  "checkboxes": [
    {
      "label": "Explore",
      "id": "explore"
    },
    {
      "label": "Create",
      "id": "create"
    },
    {
      "label": "Grow",
      "id": "grow"
    }
  ]
}
  • Content: 
    .Checkboxes {
  > * {
    --flow: 0.5rem;
  }

  &__title {
    font-weight: bold;
  }

  &__group {
    display: flex;
  }

  .Checkbox {
    display: block;
    position: relative;
    margin-right: 1.5rem;

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

    &__check {
      display: block;
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
      left: 0;
      height: 25px;
      width: 25px;
      background-color: var(--white);
      border: 2px solid var(--dark);
      transition: border 0.3s ease-out;
      pointer-events: none;
    }

    &__label {
      display: block;
      position: relative;
      cursor: pointer;
      padding-left: 2rem;
    }

    &__check:after {
      content: '';
      background-color: var(--dark);
      position: absolute;
      opacity: 0;
      transform: scale(0.2);
      top: 3px;
      left: 3px;
      width: calc(100% - 6px);
      height: calc(100% - 6px);
      transition: all 0.2s cubic-bezier(0.21, 0.51, 0.4, 1.26);
    }

    &__input:focus:not(:checked) ~ span {
      border-color: var(--light-grey);
    }

    &__input:checked ~ span:after {
      opacity: 1;
      transform: scale(1);
    }
  }
}
  • URL: /components/raw/checkboxes/checkboxes.css
  • Filesystem Path: src/templates/components/checkboxes/checkboxes.css
  • Size: 1.3 KB

No notes defined.