Picker

Pickers are used to select one or more options in a list.

Examples

Use multi-select pickers when more than one option can be chosen.

Name	Interface
`PickerOption`	interface PickerOption { label: `string`; id?: `string`; description?: `string`; checked?: `string`; disabled?: `string`; }

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 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 component, including variations like checkboxes and radio buttons, meet the minimum target size of 44x44 pixels.
Implement noticeable focus indicators on interactive elements, including checkboxes and radio buttons.
Refer to our accessibility guides for Picker Content Variations, including checkboxes and radio buttons, to ensure comprehensive adherence to best practices.

Ensure all interactive elements in the picker, including variations like checkboxes and radio buttons, meet the minimum target size of 44x44 pixels.
Design elements, including checkboxes and radio buttons, with adequate spacing to prevent accidental activations.
Design the picker 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, including checkboxes and radio buttons.
Use spacing, typography, and visual cues effectively for all picker variations.
Maintain consistency in the design of the picker and its variations to provide a cohesive user experience.
Refer to our guides for Picker Content Variations, including checkboxes and radio buttons, to ensure comprehensive adherence to best practices.

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)