CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Select

Selects are used to select a single item in a list of many options.
  • Examples
  • Properties
  • Accessibility

Examples

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

Web Component

Properties

Web component coming soon

Accessibility

Keyboard Navigation

KeyFunction
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
Space,Down ArrowWhen focus is on the trigger, opens the dropdown.
Up Arrow,Down ArrowMoves focus between the options in the dropdown. If focus is on the last/first option, moves focus to the first/last option respectively.
Space,EnterSelects the option and closes the dropdown.
EscCloses 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.

Guidance for developers
  • 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.
Guidance for designers
  • 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.

AttributeElementUsage
aria-labeldivDefines 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)