Blueweb
How to use
A Select is a form element that lets users choose one option from a list. When clicked or tapped, it opens a dropdown menu with all available choices.
Use it when:
- There are more than 4 options
- All options are mutually exclusive
- You want to save space compared to radio buttons
Avoid using Select if the user must compare options side by side. In that case, use radio buttons or cards instead.
Types
There are two main Select types.
Status
The Status property shows the validation state of the Select.
Do’s and Don’ts
Do
Show a default state like “Choose an option” or a pre-selected value
Don't
Don’t leave the Select empty without guidance
Do
Use aero-space-md token when stacking multiple field components vertically
Don't
Don't place field components too close to each other, it causes readability and scanning issues
Accessibility
- Each Select must have a visible label (or aria-label if visually hidden).
- Use aria-describedby for additional information or validation messages.
- Native Select elements are automatically accessible and should be preferred when possible.
- Custom Selects must support keyboard navigation:
- Tab to focus
- Up / Down to navigate options
- Enter or Space to confirm
- Make sure error messages or helper text are linked programmatically to the Select element.
Content
- Write short and clear option labels.
- Use sentence case: only capitalize the first word (unless a proper noun).
- Avoid duplicate or unclear values like “Other” or “Option 1” unless clearly explained.
- Use a placeholder like “Choose a reason” when no option is selected yet.
- Do not add tooltips or complex formatting in options. Selects should stay simple and quick to scan.
Availability
Each global component provides a shared design direction across platforms. Implementation is owned by each platform team, so development status may vary per platform.
Mobile
Kiosk
Design status
Ready