Option list
The option list component lets you create a list of grouped items that merchants can pick from. This can include single selection or multiple selection of options. Option list usually appears in a popover, and sometimes in a modal or a sidebar. Option lists are styled differently than choice lists and should not be used within a form, but as a standalone menu.
Props
No props found for this component, run `yarn gen:docs` to generate component meta first.
Events
Best practices
The option list component should:
- Be placed on its own inside a container. Usually the container behaves like a menu, as it does with popover. Don’t place other components within the same container.
- Not be used when a select component will do.
Content guidelines
Option lists
Each item in an option list should be clear and descriptive.
Related components
- To render a list of actions, use the action list component
- To create a list of grouped radio buttons or checkboxes, use the choice list component
- For a basic version of option list as a single choice menu, use the select component
Accessibility
Items in an option list are organized as list items (<li>) in an unordered list (<ul>) and are conveyed as a group of related elements to assistive technology users.
Controls in simple option lists are buttons, and controls in multiple option lists are checkboxes.
If you customize the option list, you can provide ARIA roles that fit the context. These roles must be valid according to the W3C ARIA specification to be conveyed correctly to screen reader users.
- The
roleprop adds an ARIA role to the option list wrapper