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.

Component React

// Sample code

    <Dropdown
                  style={}
                  variant={error ? "error" : ""}
                  t={t}
                  option={projectType?.["HCM-PROJECT-TYPES"]?.projectTypes}
                  optionKey={"code"}
                  selected={type}
                  select={(value) => {
                    handleChange(value);
                  }}
                  disabled = {false}
                />

Component Flutter

Component Design

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.

React

Property	Value	Default
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

Flutter

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

---

Date	Number	Notes
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.