Picker group

Picker groups are used to wrap a series of pickers on a single line.

Examples

Base

Use chi-picker-group to group a series of pickers.

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="radio-base" id="radio1" checked>
      <label for="radio1">
        Radio1
      </label>
      <input class="chi-picker__input" type="radio" name="radio-base" id="radio2">
      <label for="radio2">
        Radio2
      </label>
      <input class="chi-picker__input" type="radio" name="radio-base" id="radio3">
      <label for="radio3">
        Radio3
      </label>
    </div>
  </div>
</fieldset>

Texts and icons

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="radio-with-icon" id="radio1" checked>
      <label for="radio1">
        <i class="chi-icon icon-atom -sm"></i>
        <span>Radio1</span>
      </label>
      <input class="chi-picker__input" type="radio" name="radio-with-icon" id="radio2">
      <label for="radio2">
        <span>Radio2</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="radio-with-icon" id="radio3">
      <label for="radio3">
        <i class="chi-icon icon-atom -sm"></i>
        <span>Radio3</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
    </div>
  </div>
</fieldset>

Icons

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="radio-icon" id="radio1" checked>
      <label for="radio1">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="radio-icon" id="radio2">
      <label for="radio2">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="radio-icon" id="radio3">
      <label for="radio3">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
    </div>
  </div>
</fieldset>

Fluid and Responsive

Picker groups can be expanded to fill the parent space by applying the class -fluid. On smaller viewports, fluid pickers stack.

Horizontal

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group -fluid">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="radio-fluid" id="radio1" checked>
      <label for="radio1">
        Radio1
      </label>
      <input class="chi-picker__input" type="radio" name="radio-fluid" id="radio2">
      <label for="radio2">
        Radio2
      </label>
      <input class="chi-picker__input" type="radio" name="radio-fluid" id="radio3">
      <label for="radio3">
        Radio3
      </label>
    </div>
  </div>
</fieldset>

Alignment

Picker group text is centered by default. However, this behavior can change by applying the modifiers -align--left or -align--right.

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group -fluid">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="radio-alignment" id="radio1" checked>
      <label class="-align--left" for="radio1">
        Radio1
      </label>
      <input class="chi-picker__input" type="radio" name="radio-alignment" id="radio2">
      <label for="radio2">
        Radio2
      </label>
      <input class="chi-picker__input" type="radio" name="radio-alignment" id="radio3">
      <label class="-align--right" for="radio3">
        Radio3
      </label>
    </div>
  </div>
</fieldset>

Disable Fluidity

To disable the fluidity of a specific picker in a fluid picker group, apply the class -no-fluid to the picker.

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group -fluid">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="radio-nofluid" id="radio1" checked>
      <label for="radio1">
        Radio1
      </label>
      <input class="chi-picker__input" type="radio" name="radio-nofluid" id="radio2">
      <label class="-no-fluid" for="radio2">
        Radio2
      </label>
      <input class="chi-picker__input" type="radio" name="radio-nofluid" id="radio3">
      <label for="radio3">
        Radio3
      </label>
    </div>
  </div>
</fieldset>

Sizes

Picker groups support the following sizes: -sm, -md, -lg, -xl. The default size is -md.

-sm
Legend
Legend
-md
Legend
Legend
-lg
Legend
Legend
-xl
Legend
Legend
<!-- sm -->
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="radio-sm-text" id="radio1" checked>
      <label class="-sm" for="radio1">
        Radio1
      </label>
      <input class="chi-picker__input" type="radio" name="radio-sm-text" id="radio2">
      <label class="-sm" for="radio2">
        Radio2
      </label>
      <input class="chi-picker__input" type="radio" name="radio-sm-text" id="radio3">
      <label class="-sm" for="radio3">
        Radio3
      </label>
    </div>
  </div>
</fieldset>

<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="radio-sm-icon" id="radio-i-1" checked>
      <label class="-sm" for="radio-i-1">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -xs"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="radio-sm-icon" id="radio-i-2">
      <label class="-sm" for="radio-i-2">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -xs"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="radio-sm-icon" id="radio-i-3">
      <label class="-sm" for="radio-i-3">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -xs"></i>
      </label>
    </div>
  </div>
</fieldset>

<!-- md -->
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="radio-md-text" id="radio1" checked>
      <label class="-md" for="radio1">
        Radio1
      </label>
      <input class="chi-picker__input" type="radio" name="radio-md-text" id="radio2">
      <label class="-md" for="radio2">
        Radio2
      </label>
      <input class="chi-picker__input" type="radio" name="radio-md-text" id="radio3">
      <label class="-md" for="radio3">
        Radio3
      </label>
    </div>
  </div>
</fieldset>

<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="radio-md-icon" id="radio-i-1" checked>
      <label class="-md" for="radio-i-1">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="radio-md-icon" id="radio-i-2">
      <label class="-md" for="radio-i-2">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="radio-md-icon" id="radio-i-3">
      <label class="-md" for="radio-i-3">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
    </div>
  </div>
</fieldset>

<!-- lg -->
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="radio-lg-text" id="radio1" checked>
      <label class="-lg" for="radio1">
        Radio1
      </label>
      <input class="chi-picker__input" type="radio" name="radio-lg-text" id="radio2">
      <label class="-lg" for="radio2">
        Radio2
      </label>
      <input class="chi-picker__input" type="radio" name="radio-lg-text" id="radio3">
      <label class="-lg" for="radio3">
        Radio3
      </label>
    </div>
  </div>
</fieldset>

<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="radio-lg-icon" id="radio-i-1" checked>
      <label class="-lg" for="radio-i-1">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="radio-lg-icon" id="radio-i-2">
      <label class="-lg" for="radio-i-2">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="radio-lg-icon" id="radio-i-3">
      <label class="-lg" for="radio-i-3">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
    </div>
  </div>
</fieldset>

<!-- xl -->
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="radio-xl-text" id="radio1" checked>
      <label class="-xl" for="radio1">
        Radio1
      </label>
      <input class="chi-picker__input" type="radio" name="radio-xl-text" id="radio2">
      <label class="-xl" for="radio2">
        Radio2
      </label>
      <input class="chi-picker__input" type="radio" name="radio-xl-text" id="radio3">
      <label class="-xl" for="radio3">
        Radio3
      </label>
    </div>
  </div>
</fieldset>

<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="radio-xl-icon" id="radio-i-1" checked>
      <label class="-xl" for="radio-i-1">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="radio-xl-icon" id="radio-i-2">
      <label class="-xl" for="radio-i-2">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="radio-xl-icon" id="radio-i-3">
      <label class="-xl" for="radio-i-3">
        <span class="-sr--only">Button action</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
    </div>
  </div>
</fieldset>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon