Picker group

Picker groups are used to wrap a series of pickers on a single line.

Examples

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

Web component coming soon

Key	Function
`Tab`	Moves focus to next element in Tab sequence.
`Shift + Tab`	Moves focus to the previous focusable element.
`Enter`,`Space`	Selects the option.

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

Visit WebAIM for keyboard techniques.

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.

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.

Explore additional accessibility tips in the general Accessibility Guide.

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)