Chi Documentation
v0.9.1v0.9.0v0.8.3v0.8.2

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-formGroup">
      <input class="a-input" type="checkbox" id="checkbox1">
      <label for="checkbox1"></label>
      Checkbox1
    </div>
  </label>
</div>
<div class="m-picker">
  <input class="a-picker" type="checkbox" id="checkbox2">
  <label for="checkbox2">
    <div class="m-formGroup">
      <input class="a-input" type="checkbox" id="checkbox2">
      <label for="checkbox2"></label>
      Checkbox2
    </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-formGroup">
      <input class="a-input" type="radio" id="radio1">
      <label for="radio1"></label>
      Radio1
    </div>
  </label>
</div>
<div class="m-picker">
  <input class="a-picker" type="radio" name="box" id="radio2">
  <label for="radio2">
    <div class="m-formGroup">
      <input class="a-input" type="radio" id="radio2">
      <label for="radio2"></label>
      Radio2
    </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>