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#

Label

Web Component
HTML Blueprint

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

Label

Web Component
HTML Blueprint

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

Label*

Web Component
HTML Blueprint

<div class="chi-form__item">
  <label class="chi-label" for="example-re1">
    Label
    <abbr class="chi-label__required" aria-label="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 that a select is not required and can be skipped.

Label(optional)

Web Component
HTML Blueprint

<div class="chi-form__item">
  <label class="chi-label" for="example-op1">
    Label
    <abbr class="chi-label__optional" aria-label="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.

Label

Web Component
HTML Blueprint

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

Label

Optional helper message

Web Component
HTML Blueprint

<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 helper 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.

Label*

Please select an option

Web Component
HTML Blueprint

<div class="chi-form__item">
  <label class="chi-label" for="example-er1">
    Label
    <abbr class="chi-label__required" aria-label="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">
    <i class="chi-icon icon-circle-warning" aria-hidden="true"></i>
    Please select an option
  </div>
</div>

Sizes#

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

Label

Web Component
HTML Blueprint

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

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

Sizes#

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

Label

Web Component
HTML Blueprint

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

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

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.

Placeholder text

Web Component
HTML Blueprint

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>

Floating labels#

Floating labels are a solution to keep the placeholder visible when no label is attached to the select.

Placeholder text

Web Component
HTML Blueprint

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

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

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

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

Web Component#

Properties#

Web component coming soon

Accessibility#

Key	Function
`Tab`	Moves focus to the next focusable element.
`Shift + Tab`	Moves focus to the previous focusable element.
`Space`,`Down Arrow`	When focus is on the trigger, opens the dropdown.
`Up Arrow`,`Down Arrow`	Moves focus between the options in the dropdown. If focus is on the last/first option, moves focus to the first/last option respectively.
`Space`,`Enter`	Selects the option and closes the dropdown.
`Esc`	Closes the dropdown and returns focus to the trigger.

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

Visit WebAIM for keyboard techniques.

Utilize the select and option elements to ensure proper structure and automatic accessibility features.
Use label elements to provide descriptive labels for each select component. Ensure the for attribute of the label matches the id of the select box to support screen readers.
Use appropriate ARIA roles and attributes to enhance accessibility. For example, role="listbox" for the select element and role="option" for each option.
Error Handling and Feedback: Provide clear and immediate feedback for actions such as selection errors. Use ARIA live regions to announce updates or errors dynamically.
Test compatibility with various screen readers (like JAWS, NVDA, or VoiceOver) to ensure the select 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 high contrast between text and background colors to aid users with visual impairments. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text.
Design clear, concise labels that are visually connected to their respective select components. Include additional instructional text if the component requires specific interaction methods or behaves uniquely.
Design clear and distinct styles for error states. Use icons, text styles, and colors to highlight errors related to select components.
Focus Indicators: Design noticeable focus indicators for active components. These can include changes in border color, an outline, or shadow effects that distinctly mark the focused element.
Use spacing, typography, and visual cues effectively.
Maintain consistency in the design of the select to provide a cohesive user experience.

Find live examples in the A11y style guide.

Roles and attributes#

The following list provides essential roles and attributes you should consider to ensure our components are fully accessible across various interface scenarios.

Attribute	Element	Usage
`aria-label`	`div`	Defines a string value that labels an interactive element. It is required props for select without text content.

Resources#

Mozilla Resources for Developers: Information about the HTML select element.
W3 Single-select Combobox: Single-select combobox widget that is functionally similar to an HTML select element.
MagentaA11y: How to test the select element.

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)

Examples#

Base#

Disabled#

Required#

Optional#

Help#

Message#

Error#

Sizes#

Sizes#

Floating labels#

Floating labels#

Web Component#

Properties#

Accessibility#

Keyboard Navigation#

Roles and attributes#

Resources#

Other recommendations#

WCAG 2.2 Guidelines#