Dropdown - Single Select
Design System - Dropdown single select component
The Dropdown - Single Select lets users pick one option from a predefined list. It is ideal for forms and filters where only one choice is valid, offering a compact and user-friendly way to streamline selections.
// Sample code
<CheckBox
label="Label"
onChange={(e)=>{console.log(e.target.checked}}
/>Anatomy
Variants
Basic Dropdown
The Basic Dropdown serves as a standard selection tool, displaying a list of options when triggered. It is ideal for simple use cases such as selecting a city, category, or value from a list. This variant focuses on clarity and ease of interaction, offering a clean and accessible way to choose a single option.
Categorical Dropdown The Categorical Dropdown introduces grouped options within the dropdown menu. This structure is suitable for cases where options belong to distinct categories, such as departments, regions, or job types. Each category acts as a label, visually separating options to enhance scannability and reduce cognitive load.
Nested Text Dropdown
This enables sub-options to be embedded within a main option, providing an expandable hierarchy of selections. This is useful when each primary option leads to further granularity, such as a parent category leading to subcategories. It keeps the UI clean while supporting detailed selection paths.
Profile Dropdown
The Profile Dropdown is designed to display user-related actions and information, typically accessed via an avatar or username. It includes quick links such as account settings, profile view, and logout. This variant is focused on user personalization and session management in an application.
Profile with Nested Text Dropdown
This variant extends the Profile Dropdown by incorporating nested items for more structured user options. Sub-options can be organized under primary sections, enabling users to access layered account controls efficiently.
Tree Dropdown
The Tree Dropdown supports multi-level branching, allowing users to drill down into deeply nested structures. It is ideal for navigating hierarchical datasets such as file systems, organisational structures, or nested location data. Each node can expand independently, helping users locate items without overwhelming the interface.
Properties
Disabled A greyed-out, inactive selector showing unavailable options while maintaining visibility of potential choices.
Error Visually highlights invalid selections with warning colours and messages to prompt user correction.
Icon
An optional visual cue inside the dropdown that represents the selection type, improving recognition and UI scannability at a glance.
Label
A clear, short identifier placed consistently near the selector to indicate its purpose.
Help Text
Optional guidance below the dropdown that explains requirements or provides examples without crowding the UI.
Property Configuration Table
Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.
option
text
-
variant
text
no
id
yes/no
no
placeholder
yes/no
-
onBlur
number
-
optionKey
yes/no
-
showIcon
yes/no
no
className
yes/no
no
style
yes/no
no
profilePic
number
no
theme
yes/no
no
customSelector
no
showArrow
yes/no
no
isSearchable
yes/no
disabled
yes/no
keepNull
yes/no
freeze
yes/no
ref
yes/no
showTooltip
yes/no
showBottom
yes/no
menuStyles
yes/no
optionCardStyles
yes/no
selected
yes/no
autoFocus
yes/no
select
yes/no
Interaction State
Hover State When a user hovers over the dropdown trigger, a visual cue such as a border highlight is introduced to indicate interactivity. This subtle shift in appearance signals that the component is actionable. The hover state improves discoverability and helps users distinguish interactive elements from static content.
Selected State
When an option within the dropdown is selected, it is visually highlighted through a background colour fill and bold text style. This state communicates the user’s current choice clearly and supports actions such as re-selection or change. The selected state ensures clarity and reinforces decision-making within the interface.
Behaviours
Expanded State
When a user clicks or taps on the dropdown, it expands to reveal a list of options. The dropdown remains open until an option is selected or the user clicks outside the dropdown. The selected option is highlighted to indicate the current choice.
Animation
The dropdown opens and closes with a smooth "ease-in" animation, enhancing the user experience.
Usage Guide
Use Clear and Concise Labels
Use descriptive and straightforward labels for the dropdown and its options. This helps users quickly understand the purpose and make informed choices.
Changelog
Dec 15, 2024
v-0.0.2
This component is added to the website. This component is now individually versioned.
Design Checklist
All interactive states - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Accessible use of colours - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)
Accessible contrast for text - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible contrast for UI components - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Keyboard interactions - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Screen reader accessible - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
Responsive for all breakpoints - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
Usage guidelines - Includes a list of dos and don'ts that highlight best practices and common mistakes.
Content guidelines - Content standards and usage guidelines for writing and formatting in-product content for the component.
Defined variants and properties - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)
Defined behaviours - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
Design Kit - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.
Last updated
Was this helpful?