Picker

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

Examples

Multi-select pickers

Use multi-select pickers when more than one option can be chosen.

Base

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="checkbox-base" type="checkbox" id="checkbox1">
    <label for="checkbox1">Checkbox1</label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="checkbox-base" type="checkbox" id="checkbox2">
    <label for="checkbox2">Checkbox2</label>
  </div>
</fieldset>

Checkbox

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="checkbox-with-checkbox" type="checkbox" id="ic-Checkbox1" />
    <label for="ic-Checkbox1">
      <div class="chi-form__item -row">
        <span class="chi-picker__checkbox"></span>
        <span class="chi-picker__label">Checkbox1</span>
      </div>
    </label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="checkbox-with-checkbox" type="checkbox" id="ic-Checkbox2" />
    <label for="ic-Checkbox2">
      <div class="chi-form__item -row">
        <span class="chi-picker__checkbox"></span>
        <span class="chi-picker__label">Checkbox2</span>
      </div>
    </label>
  </div>
</fieldset>

Checkbox and description

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="checkbox-with-checkbox-description" type="checkbox" id="id-Checkbox1" />
    <label for="id-Checkbox1">
      <div class="chi-picker__content--start">
        <div class="chi-form__item -row">
          <span class="chi-picker__checkbox"></span>
          <span class="chi-picker__label">Checkbox1</span>
        </div>
        <div class="chi-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="chi-picker">
    <input class="chi-picker__input" name="checkbox-with-checkbox-description" type="checkbox" id="id-Checkbox2" />
    <label for="id-Checkbox2">
      <div class="chi-picker__content--start">
        <div class="chi-form__item -row">
          <span class="chi-picker__checkbox"></span>
          <span class="chi-picker__label">Checkbox2</span>
        </div>
        <div class="chi-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>

Single-select pickers

Use single-select pickers when only one option can be chosen.

Base

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="radio-base" type="radio" id="ei-Radio1" />
    <label for="ei-Radio1">Radio1</label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="radio-base" type="radio" id="ei-Radio2" />
    <label for="ei-Radio2">Radio2</label>
  </div>
</fieldset>

Radio button

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="with-radio" type="radio" id="ri-Radio1" />
    <label for="ri-Radio1">
      <div class="chi-form__item -row">
        <span class="chi-picker__radio"></span>
        <span class="chi-picker__label" for="ri-Radio1">Radio1</span>
      </div>
    </label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="with-radio" type="radio" id="ri-Radio2" />
    <label for="ri-Radio2">
      <div class="chi-form__item -row">
        <span class="chi-picker__radio"></span>
        <span class="chi-picker__label" for="ri-Radio2">Radio2</span>
      </div>
    </label>
  </div>
</fieldset>

Radio button and description

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="with-radio-description" type="radio" id="ide-Radio1" />
    <label for="ide-Radio1">
        <div class="chi-picker__content--start">
          <div class="chi-form__item -row">
            <span class="chi-picker__radio"></span>
            <span class="chi-picker__label" for="ri-Radio1">Radio1</span>
          </div>
          <div class="chi-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="chi-picker">
    <input class="chi-picker__input" name="with-radio-description" type="radio" id="ide-Radio2" />
    <label for="ide-Radio2">
      <div class="chi-picker__content--start">
        <div class="chi-form__item -row">
          <span class="chi-picker__radio"></span>
          <span class="chi-picker__label" for="ri-Radio2">Radio2</span>
        </div>
        <div class="chi-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>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon