Picker

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

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

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

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

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

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