Intro
The action select provides users the option to complete an action from within a select (dropdown) input.
When to Use
Do
Use the action select:
- To provide users the option to complete an action from within a select (dropdown) input.
- If users need to see the dropdown content to understand whether an action may be required.
- If there are only 1-2 actions possible relating to the dropdown content.
Don't
Don’t use the action select:
- If selecting the option does not lead to a follow up action (e.g. opening a dialog window.)
- Within a list, menu, or popover. Use an Action List Item instead.
- If the dropdown content is not required to be visible for the user to select the action.
- If 3 or more action options are required.
Anatomy
- Separator: Line to separate the dropdown content from the actions.
- Text Button: Describes the action triggered when selected. Follows Select text guidelines.
Action Select - Anatomy
Behavior and Interaction
Multiple Actions
Use up to 2 action selects within a single dropdown. Too many actions within a dropdown may take up too much space within the select component. Action select must also always be at the bottom of the select list. Do not put action select items at the top of middle of the select list.
If the dropdown contains only actions, use an Action List or Menu instead.
Examples of how not to use Action select within a select/dropdown
Use 1-2 action select list items in a single select menu at the bottom of the list contents. For long lists, users may have to scroll to the bottom to see the actions available.
Examples of how to use Action select within a select/dropdown correctly
Disabled Actions
If an action is not available to the user in the select component, do not surface it within the dropdown. There is no disabled state for action select.