Table of contents

  1. Select


Work in progress

An alternative to checkboxes and radio buttons. Useful when selcting from a long pre populated list (ie. when selecting a date range)

<label for="select-1" class="block margin-bottom--1">Select an option</label>
<div class="select-alt margin-bottom--2">
    <select name="select-1" id="select-1" class="select">
        <option value="value-1">First option</option>
        <option value="value-2">Second option</option>
        <option value="value-3">Third option</option>
        <option value="value-4">Fourth option</option>
        <option value="value-5">Fifth option</option>
        <option value="value-6">Sixth option</option>