Placeholder Text and Context:
The placeholder text within the Selectbox should provide informative yet concise guidance to users, setting clear expectations for their interaction. For instance, consider using phrases such as “Select country,” “Search names,” or “Filter dashboards” to offer helpful context.
Appropriate Usage:
The Selectbox is best employed when there are more than three options available for the user to choose from. If the choices are limited to three or fewer and the user must pick one option, opt for Radio or Single-select control buttons. In cases where multiple selections are possible within three or fewer options, prefer Checkbox or Multi-select control buttons.
Mobile Guidelines:
Ensure optimal user experience on mobile devices by centering the Selectbox above the keyboard when tapped and opened. This prevents the menu from being cut off by the keyboard interface. Users should be able to tap outside the select area to return to the closed state.
Accessibility:
- Avoid relying solely on placeholder text for field input clarification; use explicit field labels and helper text.
- Place the field label outside the field to ensure visibility at all times.
- Provide succinct helper text above the text input, if necessary, to aid understanding.
- The clear control has intentionally been removed from the tab order to streamline keyboard navigation. Keyboard users can clear content using the delete key.
Best Practices:
- Arrange the list of options in a logical order, such as by frequency of selection or numerical order.
- Avoid alphabetical ordering for better localization friendliness.
- Keep the number of options reasonable to prevent overwhelming the user.
Content Guidelines:
- Employ concise and descriptive field labels to clearly communicate the purpose of the selection.
- Opt for single-line options to maintain a clean and compact design.
- Use well-known terms for options and ensure clarity and directness in writing style.
By following these guidelines, you can enhance the usability and accessibility of the Selectbox component, providing users with an intuitive and efficient selection experience across various platforms.
