Design Kit

Picker

Pickers are used to select one or more options in a list.

Base

Type checkbox

To render a checkbox picker, apply the class a-picker to an input type="checkbox" inside a container with the class m-picker.

Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-picker">
    <input class="a-picker" type="checkbox" id="checkbox1">
    <label for="checkbox1">Checkbox1</label>
  </div>
  <div class="m-picker">
    <input class="a-picker" type="checkbox" id="checkbox2">
    <label for="checkbox2">Checkbox2</label>
  </div>
</fieldset>
Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-picker">
    <input class="a-picker" type="checkbox" id="ic-Checkbox1" />
    <label for="ic-Checkbox1">
      <div class="m-form__item -row">
        <span class="a-picker__checkbox"></span>
        <span class="a-picker__label">Checkbox1</span>
      </div>
    </label>
  </div>
  <div class="m-picker">
    <input class="a-picker" type="checkbox" id="ic-Checkbox2" />
    <label for="ic-Checkbox2">
      <div class="m-form__item -row">
        <span class="a-picker__checkbox"></span>
        <span class="a-picker__label">Checkbox2</span>
      </div>
    </label>
  </div>
</fieldset>
Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-picker">
    <input class="a-picker" type="checkbox" id="id-Checkbox1" />
    <label for="id-Checkbox1">
      <div class="m-picker__content--start">
        <div class="m-form__item -row">
          <span class="a-picker__checkbox"></span>
          <span class="a-picker__label">Checkbox1</span>
        </div>
        <div class="a-picker__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex. Nulla iaculis velit sed velit vehicula dictum. Donec ut ultrices tortor. Vivamus sit amet lorem augue.</div>
      </div>
    </label>
  </div>
  <div class="m-picker">
    <input class="a-picker" type="checkbox" id="id-Checkbox2" />
    <label for="id-Checkbox2">
      <div class="m-picker__content--start">
        <div class="m-form__item -row">
          <span class="a-picker__checkbox"></span>
          <span class="a-picker__label">Checkbox2</span>
        </div>
        <div class="a-picker__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex. Nulla iaculis velit sed velit vehicula dictum. Donec ut ultrices tortor. Vivamus sit amet lorem augue.</div>
      </div>
    </label>
  </div>
</fieldset>

Type radio

Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-picker">
    <input class="a-picker" type="radio" name="box" id="ei-Radio1" />
    <label for="ei-Radio1">Radio1</label>
  </div>
  <div class="m-picker">
    <input class="a-picker" type="radio" name="box" id="ei-Radio2" />
    <label for="ei-Radio2">Radio2</label>
  </div>
</fieldset>
Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-picker">
    <input class="a-picker" type="radio" name="box" id="ri-Radio1" />
    <label for="ri-Radio1">
      <div class="m-form__item -row">
        <span class="a-picker__radio"></span>
        <span class="a-picker__label" for="ri-Radio1">Radio1</span>
      </div>
    </label>
  </div>
  <div class="m-picker">
    <input class="a-picker" type="radio" name="box" id="ri-Radio2" />
    <label for="ri-Radio2">
      <div class="m-form__item -row">
        <span class="a-picker__radio"></span>
        <span class="a-picker__label" for="ri-Radio2">Radio2</span>
      </div>
    </label>
  </div>
</fieldset>
Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-picker">
    <input class="a-picker" type="radio" name="box" id="ide-Radio1" />
    <label for="ide-Radio1">
        <div class="m-picker__content--start">
          <div class="m-form__item -row">
            <span class="a-picker__radio"></span>
            <span class="a-picker__label" for="ri-Radio1">Radio1</span>
          </div>
          <div class="a-picker__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex. Nulla iaculis velit sed velit vehicula dictum. Donec ut ultrices tortor. Vivamus sit amet lorem augue.</div>
        </div>
    </label>
  </div>
  <div class="m-picker">
    <input class="a-picker" type="radio" name="box" id="ide-Radio2" />
    <label for="ide-Radio2">
      <div class="m-picker__content--start">
        <div class="m-form__item -row">
          <span class="a-picker__radio"></span>
          <span class="a-picker__label" for="ri-Radio2">Radio2</span>
        </div>
        <div class="a-picker__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex. Nulla iaculis velit sed velit vehicula dictum. Donec ut ultrices tortor. Vivamus sit amet lorem augue.</div>
      </div>
    </label>
  </div>
</fieldset>

Sizes

Apply size classes to render pickers larger or smaller: -sm, -md, -lg. The default size is -md.

Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-picker -sm">
    <input class="a-picker" type="radio" name="box" id="Radio1">
    <label for="Radio1">
      <div class="m-picker__content--start">Radio1 -sm</div>
      <div class="m-picker__content--end">
        <span class="-text--bold -text--body -text--small -text--right">Data</span>
        <span class="-text--normal -text--muted -text--small">Value</span>
      </div>
    </label>
  </div>
  <div class="m-picker -sm">
    <input class="a-picker" type="radio" name="box" id="Radio2">
    <label for="Radio2">
      <div class="m-picker__content--start">Radio2 -sm</div>
      <div class="m-picker__content--end">
        <span class="-text--bold -text--body -text--small -text--right">Data</span>
        <span class="-text--normal -text--muted -text--small">Value</span>
      </div>
    </label>
  </div>
</fieldset>
Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-picker -md">
    <input class="a-picker" type="radio" name="box" id="Radio1">
    <label for="Radio1">
      <div class="m-picker__content--start">Radio1 -md</div>
      <div class="m-picker__content--end">
        <span class="-text--bold -text--body -text--right">Data</span>
        <span class="-text--normal -text--muted -text--small">Value</span>
      </div>
    </label>
  </div>
  <div class="m-picker -md">
    <input class="a-picker" type="radio" name="box" id="Radio2">
    <label for="Radio2">
      <div class=m-picker__content--start>Radio2 -md</div>
      <div class="m-picker__content--end">
        <span class="-text--bold -text--body -text--right">Data</span>
        <span class="-text--normal -text--muted -text--small">Value</span>
      </div>
    </label>
  </div>
</fieldset>
Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-picker -lg">
    <input class="a-picker" type="radio" name="box" id="Radio1">
    <label for="Radio1">
      <div class="m-picker__content--start">
        <span class="-text--bold">Radio1 -lg</span>
        <span class="-text--normal -text--body -text--small">Data:<strong> Value</strong></span>
      </div>
      <div class="m-picker__content-end">
        <span class="-text--bold -text--body -text--large">Data</span>
      </div>
    </label>
  </div>
  <div class="m-picker -lg">
    <input class="a-picker" type="radio" name="box" id="Radio2">
    <label for="Radio2">
      <div class="m-picker__content--start">
        <span class="-text--bold">Radio2 -lg</span>
        <span class="-text--normal -text--muted -text--small">Data:<strong> Value</strong></span>
      </div>
      <div class="m-picker__content--end">
        <span class="-text--bold -text--body -text--large">Data</span>
      </div>
    </label>
  </div>
</fieldset>