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

Picker group

Picker groups are used to wrap a series of pickers on a single line.
  • Examples
  • Properties
  • Accessibility

Examples

Responsive

Picker groups can be expanded to fill the parent space by applying the class -fluid. On smaller viewports, fluid pickers stack.

Content Variations

Web Component

Properties

Web component coming soon

Accessibility

Keyboard Navigation

KeyFunction
TabMoves focus to next element in Tab sequence.
Shift + TabMoves focus to the previous focusable element.
Enter,SpaceSelects the option.

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

Visit WebAIM for keyboard techniques.

Guidance for developers
  • Keyboard Navigation: Support navigation through the options, and allow selection with the "Enter" key.
  • Use label elements to provide descriptive labels.
  • Use appropriate ARIA roles and attributes to enhance accessibility.
  • Test compatibility with various screen readers (like JAWS, NVDA, or VoiceOver) to ensure the picker group 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 all interactive elements in the picker group, meet the minimum target size of 44x44 pixels.
  • Design elements with adequate spacing to prevent accidental activations.
  • Design the picker group with high contrast between text and background colors, ensuring a minimum contrast ratio of 4.5:1 for text.
  • Implement noticeable focus indicators on interactive elements.
  • Use spacing, typography, and visual cues effectively.
  • Maintain consistency in the design of the picker group to provide a cohesive user experience.

Find live examples in the W3 picker group Example.

Resources

  • Mozilla Resources for Developers: Information about the ARIA: group role.
  • MagentaA11y: How to test a picker group dialog.

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)