Select

Selects are used to select a single item in a list of many options.

Examples

To render a select, apply the class chi-select to a select.

Base

<div class="chi-form__item">
  <label class="chi-label" for="example-ba1">Label</label>
  <select class="chi-select" id="example-ba1">
    <option value="">Select</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

Disabled

<div class="chi-form__item">
  <label class="chi-label" for="example-di1">Label</label>
  <select class="chi-select" id="example-di1" disabled>
    <option value="">Select</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

Required

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

<div class="chi-form__item">
  <label class="chi-label" for="example-re1">
    Label
    <abbr class="chi-label__required" title="Required field">*</abbr>
  </label>
  <select class="chi-select" id="example-re1" required>
    <option value="">Select</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

Optional

Use optional to help emphasize a select is not required and can be skipped.

<div class="chi-form__item">
  <label class="chi-label" for="example-op1">
    Label
    <abbr class="chi-label__optional" title="Optional field">(optional)</abbr>
  </label>
  <select class="chi-select" id="example-op1" required>
    <option value="">Select</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

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.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-form__item">
  <div class="chi-label__wrapper">
    <label class="chi-label" for="example-he1">Label</label>
    <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>
  <select class="chi-select" id="example-he1">
    <option value="">Select</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

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

Message

Add a message below a select to store descriptions, validation feedback, and other helpful information.

Optional input message
<div class="chi-form__item">
  <label class="chi-label" for="example-me1">Label</label>
  <select class="chi-select" id="example-me1">
    <option value="">Select</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <div class="chi-label -status">Optional input message</div>
</div>

Error

Use the -danger state to provide feedback to users when a selection has not been made. Once a selection has been made, the state must be removed. To meet accessibility requirements, danger inputs must include an error message explaining the failure and/or how to correct it.

Please select an option.
<div class="chi-form__item">
  <label class="chi-label" for="example-er1">
    Label
    <abbr class="chi-label__required" title="Required field">*</abbr>
  </label>
  <select class="chi-select -danger" id="example-er1" required>
    <option value="">Select</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <div class="chi-label -status -danger">Please select an option.</div>
</div>

Sizes

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

<!-- sm -->
<div class="chi-form__item">
  <label class="chi-label" for="example-size-sm">Label</label>
  <select class="chi-select -sm" id="example-size-sm">
    <option>-sm Select</option>
  </select>
</div>

<!-- md -->
<div class="chi-form__item">
  <label class="chi-label" for="example-size-md">Label</label>
  <select class="chi-select -md" id="example-size-md">
    <option>-md Select</option>
  </select>
</div>

<!-- lg -->
<div class="chi-form__item">
  <label class="chi-label" for="example-size-lg">Label</label>
  <select class="chi-select -lg" id="example-size-lg">
    <option>-lg Select</option>
  </select>
</div>

<!-- xl -->
<div class="chi-form__item">
  <label class="chi-label" for="example-size-xl">Label</label>
  <select class="chi-select -xl" id="example-size-xl">
    <option>-xl Select</option>
  </select>
</div>

Floating labels

Floating labels are a solution to keep the placeholder visible when no label is attached to the select. Chi only supports floating labels on -lg and -xl selects.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div id="floating-label-lg" class="chi-input__wrapper -floating-label">
  <select class="chi-select -lg" id="floating-label-select-lg">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <label for="floating-label-select-lg">Placeholder text</label>
</div>

<div id="floating-label-xl" class="chi-input__wrapper -floating-label">
  <select class="chi-select -xl" id="floating-label-select-xl">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <label for="floating-label-select-xl">Placeholder text</label>
</div>

<script>chi.floatingLabel(document.querySelectorAll('.-floating-label'));</script>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon