Select
An accordion is a container that contains a header and a body that is revealed/hidden when toggled. When more than one accordion is used, it stacks vertically with no spacing.
Anatomy
Legend
- Border
- Icon (Chevron)
- Label
- Error text
- Divider
- Options
Options
No options
The select input currently supports only one size and variant.
Behavior
Focus State
The border will transition to blue-bright when in focus, and the chevron will flip, revealing the options.
Error State
When in an error state, the border will transition to red with an error message, and the options will collapse.
Disabled State
When in a disabled state, the input will not be interactive and revert to the standard disabled state.
Text Overflow
Text will overflow, but the input will not height will not expand.
Usage guidelines
Overflow Text
Size the select input according to the data you will be taking on. Since the input currently does not change in height input data will need to be designed around to avoid ugly overflow.
Clear Labels
Labels in select inputs are essential as the options may read as different from each other without a label.
Specs
Size
Select input has a fixed height of 48px, and the width takes 100% of its parent container. The height when options are revealed is 100% of the total amount of options.
Spacing
Spacing of the select input is 8px padding top and bottom, 8px left, 16px right and 4px between the input and the error message.
Component Checklist
Visual information required to identify components and states (except inactive components) has a contrast ratio to meet WCAG 2.0 level AA. This exclude text contrast requirements. Unless disabled text should always be accessbile.
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Sizing, spacing, and other visual styles have been outline in documentation and the coded component has been VQA to match
Considerations have been made to think in darkmode, lightmode, button themes and other applicable themes
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
A equivalent design component as been created matching as best as possible to properties found in the coded component.
Component can scale for all platforms mobile, tablet, and desktop.
Component has an opinion on how it scales on Homepage columns and other modular layouts.
Component can be used in iOS and Andriod or has an equivalent app component
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
Meets minimum requirements to ensure minimal impact to Web vitals. (Skeleton loads, Animations, Avoid layout shift, etc.)