Picker Group

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

Examples

Base

To render a picker group, wrap a series of pickers in a div and apply the class chi-picker-group.

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <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>
</fieldset>

Texts and icons

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <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>
</fieldset>

Icons

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <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>
</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">
    <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>
</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">
    <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>
</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">
    <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>
</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">
    <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>
</fieldset>

<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <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>
</fieldset>

<!-- md -->
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <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>
</fieldset>

<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <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>
</fieldset>

<!-- lg -->
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <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>
</fieldset>

<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <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>
</fieldset>

<!-- xl -->
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <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>
</fieldset>

<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker-group">
    <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>
</fieldset>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon