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.

<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>

<div class="m-picker">
  <input class="a-picker" type="checkbox" id="checkbox1">
  <label for="checkbox1">
    <div class="m-form__item -row">
      <div class="a-checkbox">
        <input class="a-checkbox__input" type="checkbox" id="checkbox1-inner">
        <label class="a-checkbox__label" for="checkbox1-inner">Checkbox1</label>
      </div>
    </div>
  </label>
</div>
<div class="m-picker">
  <input class="a-picker" type="checkbox" id="checkbox2">
  <label for="checkbox2">
    <div class="m-form__item -row">
      <div class="a-checkbox">
        <input class="a-checkbox__input" type="checkbox" id="checkbox2-inner">
        <label class="a-checkbox__label" for="checkbox2-inner">Checkbox2</label>
      </div>
    </div>
  </label>
</div>

<div class="m-picker">
  <input class="a-picker" type="checkbox" id="checkbox1">
  <label for="checkbox1">
    <div class="m-picker__content--start">
      <div class="m-form__item -row">
        <div class="a-checkbox">
          <input class="a-checkbox__input" type="checkbox" id="checkbox1-inner">
          <label class="a-checkbox__label" for="checkbox1-inner">Checkbox1</label>
        </div>
      </div>
      <div class="-text--normal -text--body -text--small">
        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="checkbox2">
  <label for="checkbox2">
    <div class="m-picker__content--start">
      <div class="m-form__item -row">
        <div class="a-checkbox">
          <input class="a-checkbox__input" type="checkbox" id="checkbox2-inner">
          <label class="a-checkbox__label" for="checkbox2-inner">Checkbox2</label>
        </div>
      </div>
      <div class="-text--normal -text--body -text--small">
        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>

Type radio

<div class="m-picker">
  <input class="a-picker" type="radio" name="radios" id="radio1">
  <label for="radio1">
    Radio2
  </label>
</div>
<div class="m-picker">
  <input class="a-picker" type="radio" name="radios" id="radio2">
  <label for="radio2">
    Radio2
  </label>
</div>
<div class="m-picker">
  <input class="a-picker" type="radio" name="box" id="radio1">
  <label for="radio1">
    <div class="m-form__item -row">
      <div class="a-radio">
        <input class="a-radio__input" type="radio" id="radio1">
        <label class="a-radio__label" for="radio1">Radio1</label>
      </div>
    </div>
  </label>
</div>
<div class="m-picker">
  <input class="a-picker" type="radio" name="box" id="radio2">
  <label for="radio2">
    <div class="m-form__item -row">
      <div class="a-radio">
        <input class="a-radio__input" type="radio" id="radio2">
        <label class="a-radio__label" for="radio2">Radio2</label>
      </div>
    </div>
  </label>
</div>
<div class="m-picker">
  <input class="a-picker" type="radio" name="box" id="radio1">
  <label for="radio1">
    <div class="m-picker__content--start">
      <div class="m-form__item -row">
        <div class="a-radio">
          <input class="a-radio__input" type="radio" id="radio1">
          <label class="a-radio__label" for="radio1">Radio1</label>
        </div>
      </div>
      <div class="-text--normal -text--body -text--small">
        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="radio2">
  <label for="radio2">
    <div class="m-picker__content--start">
      <div class="m-form__item -row">
        <div class="a-radio">
          <input class="a-radio__input" type="radio" id="radio2">
          <label class="a-radio__label" for="radio2">Radio2</label>
        </div>
      </div>
      <div class="-text--normal -text--body -text--small">
        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>

Sizes

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

<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>
<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>
<div class="m-picker -lg">
  <input class="a-picker" type="radio" name="box" id="Radio1">
  <label for="Radio1">
    <div class="m-picker__content--start">
      <label class="-text--bold">Radio1 -lg</label>
      <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">
      <label class="-text--bold">Radio2 -lg</label>
      <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>