Springboard

Filter: Pill 

<div class="filter--pill">
    <input type="radio" id="Kentucky" name="state">
    <label for="Kentucky"> Kentucky </label>
</div>
<div class="filter--pill">
    <input type="radio" id="Indiana" name="state">
    <label for="Indiana"> Indiana </label>
</div>
<div class="filter--pill">
    <input type="radio" id="Tennessee" name="state">
    <label for="Tennessee"> Tennessee </label>
</div>
 
{{#each filters}}
<div class="filter--pill">
  <input type="radio" id="{{ id }}" name="{{ name }}">
  <label for="{{ id }}"> {{ id }} </label>
</div>
{{/each}}
 
{
  "filters": [
    {
      "id": "Kentucky",
      "name": "state"
    },
    {
      "id": "Indiana",
      "name": "state"
    },
    {
      "id": "Tennessee",
      "name": "state"
    }
  ]
}
  • Content: 
    .filter {
  position: relative;
  display: inline-block;
  margin: 0 0 .25rem;

  input {
    position: absolute;
    left: .6rem;
    opacity: 0;
  }

  label {
    display: inline-block;
    margin: 0;
    padding: .25em .6em;
    border: solid 1px #ddd;
    background: #fff;
    text-transform: none;
    line-height: 1.4;
    letter-spacing: 0;
    cursor: pointer;
    user-select: none;
  }

  input:checked + label {
    color: #fff;
    background: $color-active;
    border-color: transparent;
  }
}

.filter--pill {
  @extend .filter;

  label {
    border-radius: .95em;
  }
}

.filter--rect {
  @extend .filter;

  label {
    border-radius: .3em;
  }
}
  • URL: /components/raw/filter/_sass.scss
  • Filesystem Path: components/02-modules/form/filter/_sass.scss
  • Size: 668 Bytes

Clickable labels with a selected/deselected state, such as may be used to filter results based on certain criteria. These are nothing more than stylized checkbox or radiobuttons w/labels. Any behavior would have to be added with JavaScript.

Variations: .filter--pill or .filter--rect