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" aria-label="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" aria-label="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" aria-label="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">
    <i class="chi-icon icon-circle-warning" aria-hidden="true"></i>
    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>

Pill

Use the -pill modifier class to render picker with a more pronounced border-radius.

Picker pills support the following sizes: -sm, -xs.

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="-d--flex">
    <div class="chi-picker -pill -sm">
      <input class="chi-picker__input" type="radio" name="unique-name-sba" id="unique-id-pill-1" checked />
      <label for="unique-id-pill-1">Option 1</label>
    </div>
    <div class="chi-picker -pill -sm">
      <input class="chi-picker__input" type="radio" name="unique-name-sba" id="unique-id-pill-2" />
      <label for="unique-id-pill-2">Option 2</label>
    </div>
  </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>

Radio button with description and price

Legend
<fieldset>
  <legend class="chi-label">Legend</legend>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-prdp" type="radio" id="unique-id-prdp1" />
    <label for="unique-id-prdp1">
      <div class="chi-picker__content">
        <div class="chi-picker__content--start -w--100 -w-sm--65">
          <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>
        <div class="chi-picker__content--end">
          <div class="chi-picker__label">
            $0.00
            <span class="-text--normal">/mo</span>
          </div>
        </div>
      </div>
    </label>
  </div>
  <div class="chi-picker">
    <input class="chi-picker__input" name="unique-name-prdp" type="radio" id="unique-id-prdp2" />
    <label for="unique-id-prdp2">
      <div class="chi-picker__content">
        <div class="chi-picker__content--start -w--100 -w-sm--6">
          <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>
        <div class="chi-picker__content--end">
          <div class="chi-picker__label">
            $19.95
            <span class="-text--normal">/mo</span>
          </div>
        </div>
      </div>
    </label>
  </div>
</fieldset>

Sizes

Pickers support the following sizes: -md, -lg. The default size is -md.

-md

Base
Select an option
Icon
Select an option
Description
Select an option
Description with Price
Select an option

-lg

Base
Select an option
Icon
Select an option
Description
Select an option
Description with Price
Select an option
<!-- md -->
<!-- Base -->
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker -md">
    <input class="chi-picker__input" type="radio" name="unique-name-md-base" id="unique-id-md-base-1" checked>
    <label for="unique-id-md-base-1">Option 1</label>
  </div>
  <div class="chi-picker -md">
    <input class="chi-picker__input" type="radio" name="unique-name-md-base" id="unique-id-md-base-2">
    <label for="unique-id-md-base-2">Option 2</label>
  </div>
</fieldset>

<!-- Icon -->
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker -md">
    <input class="chi-picker__input" type="radio" name="unique-name-md-icon" id="unique-id-md-icon-1" checked>
    <label for="unique-id-md-icon-1">
      <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 -md">
    <input class="chi-picker__input" type="radio" name="unique-name-md-icon" id="unique-id-md-icon-2">
    <label for="unique-id-md-icon-2">
      <div class="chi-form__item -row">
        <span class="chi-picker__radio"></span>
        <span class="chi-picker__label">Option 2</span>
      </div>
    </label>
  </div>
</fieldset>

<!-- Description -->
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker -md">
    <input class="chi-picker__input" type="radio" name="unique-name-md-description" id="unique-id-md-description-1" checked>
    <label for="unique-id-md-description-1">
      <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 -md">
    <input class="chi-picker__input" type="radio" name="unique-name-md-description" id="unique-id-md-description-2">
    <label for="unique-id-md-description-2">
      <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>

<!-- Description with Price -->
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker -md">
    <input class="chi-picker__input" type="radio" name="unique-name-md-description-price" id="unique-id-md-description-price-1" checked>
    <label for="unique-id-md-description-price-1">
      <div class="chi-picker__content">
        <div class="chi-picker__content--start -w--100 -w-sm--65">
          <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.</div>
        </div>
        <div class="chi-picker__content--end">
          <div class="chi-picker__label">
            $0.00<span class="-text--normal">/mo</span>
          </div>
        </div>
      </div>
    </label>
  </div>
  <div class="chi-picker -md">
    <input class="chi-picker__input" type="radio" name="unique-name-md-description-price" id="unique-id-md-description-price-2">
    <label for="unique-id-md-description-price-2">
      <div class="chi-picker__content">
        <div class="chi-picker__content--start -w--100 -w-sm--65">
          <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.</div>
        </div>
        <div class="chi-picker__content--end">
          <div class="chi-picker__label">
            $0.00<span class="-text--normal">/mo</span>
          </div>
        </div>
      </div>
    </label>
  </div>
</fieldset>

<!-- lg -->
<!-- Base -->
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker -lg">
    <input class="chi-picker__input" type="radio" name="unique-name-lg-base" id="unique-id-lg-base-1" checked>
    <label for="unique-id-lg-base-1">Option 1</label>
  </div>
  <div class="chi-picker -lg">
    <input class="chi-picker__input" type="radio" name="unique-name-lg-base" id="unique-id-lg-base-2">
    <label for="unique-id-lg-base-2">Option 2</label>
  </div>
</fieldset>

<!-- Icon -->
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker -lg">
    <input class="chi-picker__input" type="radio" name="unique-name-lg-icon" id="unique-id-lg-icon-1" checked>
    <label for="unique-id-lg-icon-1">
      <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 -lg">
    <input class="chi-picker__input" type="radio" name="unique-name-lg-icon" id="unique-id-lg-icon-2">
    <label for="unique-id-lg-icon-2">
      <div class="chi-form__item -row">
        <span class="chi-picker__radio"></span>
        <span class="chi-picker__label">Option 2</span>
      </div>
    </label>
  </div>
</fieldset>

<!-- Description -->
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker -lg">
    <input class="chi-picker__input" type="radio" name="unique-name-lg-description" id="unique-id-lg-description-1" checked>
    <label for="unique-id-lg-description-1">
      <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 -lg">
    <input class="chi-picker__input" type="radio" name="unique-name-lg-description" id="unique-id-lg-description-2">
    <label for="unique-id-lg-description-2">
      <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>

<!-- Description with Price -->
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker -lg">
    <input class="chi-picker__input" type="radio" name="unique-name-lg-description-price" id="unique-id-lg-description-price-1" checked>
    <label for="unique-id-lg-description-price-1">
      <div class="chi-picker__content">
        <div class="chi-picker__content--start -w--100 -w-sm--65">
          <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.</div>
        </div>
        <div class="chi-picker__content--end">
          <div class="chi-picker__label">
            $0.00<span class="-text--normal">/mo</span>
          </div>
        </div>
      </div>
    </label>
  </div>
  <div class="chi-picker -lg">
    <input class="chi-picker__input" type="radio" name="unique-name-lg-description-price" id="unique-id-lg-description-price-2">
    <label for="unique-id-lg-description-price-2">
      <div class="chi-picker__content">
        <div class="chi-picker__content--start -w--100 -w-sm--65">
          <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.</div>
        </div>
        <div class="chi-picker__content--end">
          <div class="chi-picker__label">
            $0.00<span class="-text--normal">/mo</span>
          </div>
        </div>
      </div>
    </label>
  </div>
</fieldset>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon