CenturyLink Logo
CenturyLink
Lumen Logo
Lumen
Lumen Enterprise Portal Logo
Lumen Enterprise Portal

Picker

Pickers are used to select one or more options in a list.

Examples#

Multi-select pickers#

Use multi-select pickers when more than one option can be chosen.

Base#

Select options
<fieldset>
  <legend class="chi-label">Select options</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mba" type="checkbox" id="unique-id-mba1">
    <label for="unique-id-mba1">Option 1</label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mba" type="checkbox" id="unique-id-mba2">
    <label for="unique-id-mba2">Option 2</label>
  </div>
</fieldset>

Checked#

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

Select options
<fieldset>
  <legend class="chi-label">Select options</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mch" type="checkbox" id="unique-id-mch1" checked>
    <label for="unique-id-mch1">Option 1</label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mch" type="checkbox" id="unique-id-mch2">
    <label for="unique-id-mch2">Option 2</label>
  </div>
</fieldset>

Disabled#

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

Select options
<fieldset>
  <legend class="chi-label">Select options</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mdi" type="checkbox" id="unique-id-mdi1">
    <label for="unique-id-mdi1">Option 1</label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mdi" type="checkbox" id="unique-id-mdi2">
    <label for="unique-id-mdi2">Option 2</label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mdi" type="checkbox" id="unique-id-mdi3" disabled>
    <label for="unique-id-mdi3">Option 3</label>
  </div>
</fieldset>

Required#

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

Select options*
<fieldset>
  <legend class="chi-label">
    Select options
    <abbr class="chi-label__required" title="Required field">*</abbr>
  </legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mre" type="checkbox" id="unique-id-mre1" required>
    <label for="unique-id-mre1">Option 1</label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mre" type="checkbox" id="unique-id-mre2">
    <label for="unique-id-mre2">Option 2</label>
  </div>
</fieldset>

Optional#

Use optional to help emphasize pickers that are not required and can be skipped.

Select options(optional)
<fieldset>
  <legend class="chi-label">
    Select options
    <abbr class="chi-label__optional" title="Optional field">(optional)</abbr>
  </legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mop" type="checkbox" id="unique-id-mop1">
    <label for="unique-id-mop1">Option 1</label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mop" type="checkbox" id="unique-id-mop2">
    <label for="unique-id-mop2">Option 2</label>
  </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 options
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 options</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 class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mhe" type="checkbox" id="unique-id-mhe1">
    <label for="unique-id-mhe1">Option 1</label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mhe" type="checkbox" id="unique-id-mhe2">
    <label for="unique-id-mhe2">Option 2</label>
  </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 options*
Please select an option.
<fieldset>
  <legend class="chi-label">
    Select options
    <abbr class="chi-label__required" title="Required field">*</abbr>
  </legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mer" type="checkbox" id="unique-id-mer1" required>
    <label for="unique-id-mer1">Option 1</label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-mer" type="checkbox" id="unique-id-mer2">
    <label for="unique-id-mer2">Option 2</label>
  </div>
  <div class="chi-label -status -danger">Please select an option.</div>
</fieldset>

Single-select pickers#

Use single-select pickers when only one option can be chosen.

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-sba" type="radio" id="unique-id-sba1" />
    <label for="unique-id-sba1">Option 1</label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-sba" type="radio" id="unique-id-sba2" />
    <label for="unique-id-sba2">Option 2</label>
  </div>
</fieldset>

Content Variations#

Checkbox#

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-sch" type="checkbox" id="unique-id-sch1" />
    <label for="unique-id-sch1">
      <div class="chi-form__item -row">
        <span class="chi-picker__checkbox"></span>
        <span class="chi-picker__label">Option 1</span>
      </div>
    </label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-sch" type="checkbox" id="unique-id-sch2" />
    <label for="unique-id-sch2">
      <div class="chi-form__item -row">
        <span class="chi-picker__checkbox"></span>
        <span class="chi-picker__label">Option 2</span>
      </div>
    </label>
  </div>
</fieldset>

Checkbox and description#

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-scd" type="checkbox" id="unique-id-scd1" />
    <label for="unique-id-scd1">
      <div class="chi-picker__content--start">
        <div class="chi-form__item -row">
          <span class="chi-picker__checkbox"></span>
          <span class="chi-picker__label">Option 1</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="unique-name-scd" type="checkbox" id="unique-id-scd2" />
    <label for="unique-id-scd2">
      <div class="chi-picker__content--start">
        <div class="chi-form__item -row">
          <span class="chi-picker__checkbox"></span>
          <span class="chi-picker__label">Option 2</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>

Radio button#

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-sra" type="radio" id="unique-id-sra1" />
    <label for="unique-id-sra1">
      <div class="chi-form__item -row">
        <span class="chi-picker__radio"></span>
        <span class="chi-picker__label">Option 1</span>
      </div>
    </label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-sra" type="radio" id="unique-id-sra2" />
    <label for="unique-id-sra2">
      <div class="chi-form__item -row">
        <span class="chi-picker__radio"></span>
        <span class="chi-picker__label">Option 2</span>
      </div>
    </label>
  </div>
</fieldset>

Radio button and description#

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-srd" type="radio" id="unique-id-srd1" />
    <label for="unique-id-srd1">
        <div class="chi-picker__content--start">
          <div class="chi-form__item -row">
            <span class="chi-picker__radio"></span>
            <span class="chi-picker__label">Option 1</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="unique-name-srd" type="radio" id="unique-id-srd2" />
    <label for="unique-id-srd2">
      <div class="chi-picker__content--start">
        <div class="chi-form__item -row">
          <span class="chi-picker__radio"></span>
          <span class="chi-picker__label">Option 2</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>

Web Component#

Properties#

Web component coming soon

Accessibility#

Accessibility guidelines coming soon