Picker group

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

Examples

Base

Select an option
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-ba" id="unique-id-ba1">
      <label for="unique-id-ba1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-ba" id="unique-id-ba2">
      <label for="unique-id-ba2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-ba" id="unique-id-ba3">
      <label for="unique-id-ba3">Option 3</label>
    </div>
  </div>
</fieldset>

Checked

Use the checked boolean attribute to set the default value of a picker group input to true.

Select an option
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-ch" id="unique-id-ch1" checked>
      <label for="unique-id-ch1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-ch" id="unique-id-ch2">
      <label for="unique-id-ch2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-ch" id="unique-id-ch3">
      <label for="unique-id-ch3">Option 3</label>
    </div>
  </div>
</fieldset>

Disabled

Use the disabled boolean attribute to prevent users from interacting with a picker group input. Disabled inputs are not submitted with the form and can not receive any browsing events such as mouse clicks or focus.

Select an option
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-di" id="unique-id-di1">
      <label for="unique-id-di1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-di" id="unique-id-di2">
      <label for="unique-id-di2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-di" id="unique-id-di3" disabled>
      <label for="unique-id-di3">Option 3</label>
    </div>
  </div>
</fieldset>

Required

Use the required boolean attribute to indicate which picker groups must be completed before submitting a form.

Select an option*
<fieldset>
  <legend class="chi-label">
    Select an option
    <abbr class="chi-label__required" title="Required field">*</abbr>
  </legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-re" id="unique-id-re1" required>
      <label for="unique-id-re1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-re" id="unique-id-re2">
      <label for="unique-id-re2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-re" id="unique-id-re3">
      <label for="unique-id-re3">Option 3</label>
    </div>
  </div>
</fieldset>

Optional

Use optional to help emphasize a picker group that is not required and can be skipped.

Select an option(optional)
<fieldset>
  <legend class="chi-label">
    Select an option
    <abbr class="chi-label__optional" title="Optional field">(optional)</abbr>
  </legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-op" id="unique-id-op1">
      <label for="unique-id-op1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-op" id="unique-id-op2">
      <label for="unique-id-op2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-op" id="unique-id-op3">
      <label for="unique-id-op3">Option 3</label>
    </div>
  </div>
</fieldset>

Help

Use chi-label__help to include a help icon that displays helpful information about an input in a popover. A help icon must be contained within an icon button to ensure it receives focus when a user tabs through a form.

Select an option
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<fieldset>
  <div class="chi-label__wrapper">
    <legend class="chi-label">Select an option</legend>
    <div class="chi-label__help">
      <button class="chi-button -icon -sm -flat" id="example__help-button" aria-label="Help" data-target="#example__help-popover">
        <i class="chi-icon icon-circle-info-outline"></i>
      </button>
      <section class="chi-popover chi-popover--top -animated" id="example__help-popover" aria-modal="true" role="dialog" aria-hidden="true" x-placement="top">
        <div class="chi-popover__content">
          <p class="chi-popover__text">Helpful information goes here.</p>
        </div>
      </section>
    </div>
  </div>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-he" id="unique-id-he1">
      <label for="unique-id-he1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-he" id="unique-id-he2">
      <label for="unique-id-he2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-he" id="unique-id-he3">
      <label for="unique-id-he3">Option 3</label>
    </div>
  </div>
</fieldset>

<script>
  chi.popover(document.getElementById('example__help-button'));
</script>

Error

Use the -danger state to provide feedback to users when an input fails to validate. To meet accessibility requirements, danger inputs must include an error message explaining the failure and/or how to correct it.

Select an option*
Please select an option.
<fieldset>
  <legend class="chi-label">
    Select an option
    <abbr class="chi-label__required" title="Required field">*</abbr>
  </legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-er" id="unique-id-er1" required>
      <label for="unique-id-er1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-er" id="unique-id-er2">
      <label for="unique-id-er2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-er" id="unique-id-er3">
      <label for="unique-id-er3">Option 3</label>
    </div>
  </div>
  <div class="chi-label -status -danger">Please select an option.</div>
</fieldset>

Responsive

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

Fluid

Select an option
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group -fluid">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-fl" id="unique-id-fl1" checked>
      <label for="unique-id-fl1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-fl" id="unique-id-fl2">
      <label for="unique-id-fl2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-fl" id="unique-id-fl3">
      <label for="unique-id-fl3">Option 3</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.

Select an option
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group -fluid">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-al" id="unique-id-al1" checked>
      <label class="-align--left" for="unique-id-al1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-al" id="unique-id-al2">
      <label for="unique-id-al2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-al" id="unique-id-al3">
      <label class="-align--right" for="unique-id-al3">Option 3</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.

Select an option
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group -fluid">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-df" id="unique-id-df1" checked>
      <label for="unique-id-df1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-df" id="unique-id-df2">
      <label class="-no-fluid" for="unique-id-df2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-df" id="unique-id-df3">
      <label for="unique-id-df3">Option 3</label>
    </div>
  </div>
</fieldset>

Content Variations

Texts and icons

Select an option
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-ti" id="unique-id-ti1" checked>
      <label for="unique-id-ti1">
        <i class="chi-icon icon-atom -sm"></i>
        <span>Radio1</span>
      </label>
      <input class="chi-picker__input" type="radio" name="unique-name-ti" id="unique-id-ti2">
      <label for="unique-id-ti2">
        <span>Radio2</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="unique-name-ti" id="unique-id-ti3">
      <label for="unique-id-ti3">
        <i class="chi-icon icon-atom -sm"></i>
        <span>Radio3</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
    </div>
  </div>
</fieldset>

Icons

Select an option
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-ic" id="unique-id-ic1" checked>
      <label for="unique-id-ic1" data-tooltip="Option 1" data-position="bottom">
        <span class="-sr--only">Option 1</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="unique-name-ic" id="unique-id-ic2">
      <label for="unique-id-ic2" data-tooltip="Option 2" data-position="bottom">
        <span class="-sr--only">Option 2</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="unique-name-ic" id="unique-id-ic3">
      <label for="unique-id-ic3" data-tooltip="Option 3" data-position="bottom">
        <span class="-sr--only">Option 3</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
    </div>
  </div>
</fieldset>

<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>

Sizes

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

-sm
Select an option
Select an option
-md
Select an option
Select an option
-lg
Select an option
Select an option
-xl
Select an option
Select an option
<!-- sm -->
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-sm" id="unique-id-sm1" checked>
      <label class="-sm" for="unique-id-sm1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-sm" id="unique-id-sm2">
      <label class="-sm" for="unique-id-sm2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-sm" id="unique-id-sm3">
      <label class="-sm" for="unique-id-sm3">Option 3</label>
    </div>
  </div>
</fieldset>

<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-sm-icon" id="unique-id-sm4" checked>
      <label class="-sm" for="unique-id-sm4">
        <span class="-sr--only">Option 1</span>
        <i class="chi-icon icon-atom -xs"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="unique-name-sm-icon" id="unique-id-sm5">
      <label class="-sm" for="unique-id-sm5">
        <span class="-sr--only">Option 2</span>
        <i class="chi-icon icon-atom -xs"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="unique-name-sm-icon" id="unique-id-sm6">
      <label class="-sm" for="unique-id-sm6">
        <span class="-sr--only">Option 3</span>
        <i class="chi-icon icon-atom -xs"></i>
      </label>
    </div>
  </div>
</fieldset>
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>

<!-- md -->
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-md" id="unique-id-md1" checked>
      <label class="-md" for="unique-id-md1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-md" id="unique-id-md2">
      <label class="-md" for="unique-id-md2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-md" id="unique-id-md3">
      <label class="-md" for="unique-id-md3">Option 3</label>
    </div>
  </div>
</fieldset>

<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-md-icon" id="unique-id-md4" checked>
      <label class="-md" for="unique-id-md4">
        <span class="-sr--only">Option 1</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="unique-name-md-icon" id="unique-id-md5">
      <label class="-md" for="unique-id-md5">
        <span class="-sr--only">Option 2</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="unique-name-md-icon" id="unique-id-md6">
      <label class="-md" for="unique-id-md6">
        <span class="-sr--only">Option 3</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
    </div>
  </div>
</fieldset>
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>

<!-- lg -->
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-lg" id="unique-id-lg1" checked>
      <label class="-lg" for="unique-id-lg1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-lg" id="unique-id-lg2">
      <label class="-lg" for="unique-id-lg2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-lg" id="unique-id-lg3">
      <label class="-lg" for="unique-id-lg3">Option 3</label>
    </div>
  </div>
</fieldset>

<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-lg-icon" id="unique-id-lg4" checked>
      <label class="-lg" for="unique-id-lg4">
        <span class="-sr--only">Option 1</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="unique-name-lg-icon" id="unique-id-lg5">
      <label class="-lg" for="unique-id-lg5">
        <span class="-sr--only">Option 2</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="unique-name-lg-icon" id="unique-id-lg6">
      <label class="-lg" for="unique-id-lg6">
        <span class="-sr--only">Option 3</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
    </div>
  </div>
</fieldset>
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>

<!-- xl -->
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-xl" id="unique-id-xl1" checked>
      <label class="-xl" for="unique-id-xl1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-xl" id="unique-id-xl2">
      <label class="-xl" for="unique-id-xl2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-xl" id="unique-id-xl3">
      <label class="-xl" for="unique-id-xl3">Option 3</label>
    </div>
  </div>
</fieldset>

<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-xl-icon" id="unique-id-xl4" checked>
      <label class="-xl" for="unique-id-xl4">
        <span class="-sr--only">Option 1</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="unique-name-xl-icon" id="unique-id-xl5">
      <label class="-xl" for="unique-id-xl5">
        <span class="-sr--only">Option 2</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
      <input class="chi-picker__input" type="radio" name="unique-name-xl-icon" id="unique-id-xl6">
      <label class="-xl" for="unique-id-xl6">
        <span class="-sr--only">Option 3</span>
        <i class="chi-icon icon-atom -sm"></i>
      </label>
    </div>
  </div>
</fieldset>
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon