Picker group

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

Examples

Base

Select an option

Option 1Option 2Option 3

Web Component
HTML Blueprint

<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

Option 1Option 2Option 3

Web Component
HTML Blueprint

<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

Option 1Option 2Option 3

Web Component
HTML Blueprint

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

Option 1Option 2Option 3

Web Component
HTML Blueprint

<fieldset>
  <legend class="chi-label">
    Select an option
    <abbr class="chi-label__required" aria-label="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)

Option 1Option 2Option 3

Web Component
HTML Blueprint

<fieldset>
  <legend class="chi-label">
    Select an option
    <abbr class="chi-label__optional" aria-label="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

Option 1Option 2Option 3

Web Component
HTML Blueprint

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 -xs -flat" id="example__help-button" aria-label="Help" data-target="#example__help-popover">
        <i class="chi-icon icon-circle-info-outline" aria-hidden="true"></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*

Option 1Option 2Option 3

Please select an option

Web Component
HTML Blueprint

<fieldset>
  <legend class="chi-label">
    Select an option
    <abbr class="chi-label__required" aria-label="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">
    <i class="chi-icon icon-circle-warning" aria-hidden="true"></i>
    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

Option 1Option 2Option 3

Web Component
HTML Blueprint

<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

Option 1Option 2Option 3

Web Component
HTML Blueprint

<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

Option 1Option 2Option 3

Web Component
HTML Blueprint

<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

Multiple lines of Text

Select an option

Radio 1

Radio 1 description

Radio 2

Radio 2 description

Radio 3

Radio 3 description

Web Component
HTML Blueprint

<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-mlt" id="unique-id-mlt1" checked>
      <label class="chi-picker-label__wrapper" for="unique-id-mlt1">
        <div class="chi-picker-label">
          Radio 1
        </div>
        <div class="chi-picker-label">
          Radio 1 description
        </div>
      </label>
      <input class="chi-picker__input" type="radio" name="unique-name-mlt" id="unique-id-mlt2">
      <label class="chi-picker-label__wrapper" for="unique-id-mlt2">
        <div class="chi-picker-label">
          Radio 2
        </div>
        <div class="chi-picker-label">
          Radio 2 description
        </div>
      </label>
      <input class="chi-picker__input" type="radio" name="unique-name-mlt" id="unique-id-mlt3">
      <label class="chi-picker-label__wrapper" for="unique-id-mlt3">
        <div class="chi-picker-label">
          Radio 3
        </div>
        <div class="chi-picker-label">
          Radio 3 description
        </div>
      </label>
    </div>
  </div>
</fieldset>

Texts and icons

Select an option

Radio1Radio2Radio3

Web Component
HTML Blueprint

<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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></i>
        <span>Radio3</span>
        <i class="chi-icon icon-atom -sm" aria-hidden="true"></i>
      </label>
    </div>
  </div>
</fieldset>

Icons

Select an option

Option 1Option 2Option 3

Web Component
HTML Blueprint

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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></i>
      </label>
    </div>
  </div>
</fieldset>

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

Sizes

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

Web Component
HTML Blueprint

<!-- xs -->
<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-xs" id="unique-id-xs1" checked>
      <label class="-xs" for="unique-id-xs1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-xs" id="unique-id-xs2">
      <label class="-xs" for="unique-id-xs2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-xs" id="unique-id-xs3">
      <label class="-xs" for="unique-id-xs3">Option 3</label>
    </div>
  </div>
</fieldset>

<!-- 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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></i>
      </label>
    </div>
  </div>
</fieldset>
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>

Sizes

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

Web Component
HTML Blueprint

<!-- xs -->
<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-xs" id="unique-id-xs1" checked>
      <label class="-xs" for="unique-id-xs1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-xs" id="unique-id-xs2">
      <label class="-xs" for="unique-id-xs2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-xs" id="unique-id-xs3">
      <label class="-xs" for="unique-id-xs3">Option 3</label>
    </div>
  </div>
</fieldset>

<!-- 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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></i>
      </label>
    </div>
  </div>
</fieldset>
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>

Web Component

Properties

Web component coming soon

Accessibility

Keyboard Navigation

Key	Function
`Tab`	Moves focus to next element in Tab sequence.
`Shift + Tab`	Moves focus to the previous focusable element.
`Enter`,`Space`	Selects the option.

For comprehensive details on keyboard support, refer to our Keyboard Control Guide.

Visit WebAIM for keyboard techniques.

Keyboard Navigation: Support navigation through the options, and allow selection with the "Enter" key.
Use label elements to provide descriptive labels.
Use appropriate ARIA roles and attributes to enhance accessibility.
Test compatibility with various screen readers (like JAWS, NVDA, or VoiceOver) to ensure the picker group component is announced correctly. Options should be clearly read out when navigated.
Implement visible focus styles to help keyboard users determine which element has focus.

Ensure all interactive elements in the picker group, meet the minimum target size of 44x44 pixels.
Design elements with adequate spacing to prevent accidental activations.
Design the picker group with high contrast between text and background colors, ensuring a minimum contrast ratio of 4.5:1 for text.
Implement noticeable focus indicators on interactive elements.
Use spacing, typography, and visual cues effectively.
Maintain consistency in the design of the picker group to provide a cohesive user experience.

Find live examples in the W3 picker group Example.

Resources

Mozilla Resources for Developers: Information about the ARIA: group role.
MagentaA11y: How to test a picker group dialog.

Other recommendations

Explore additional accessibility tips in the general Accessibility Guide.

WCAG 2.2 Guidelines

Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)