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}}
  />

// Sample code

DigitAccordion(
              header: Text('Accordion'),
              content: Text('This is the content of Accordion'),
              initiallyExpanded: false,
              divider: true,
              showBorder: true,
            ),

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.

Property

Value

Default

option

text

variant

text

yes/no

placeholder

yes/no

onBlur

number

optionKey

yes/no

showIcon

yes/no

className

yes/no

style

yes/no

profilePic

number

theme

yes/no

customSelector

showArrow

yes/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

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

PreviousStepper NextInput Fields

Last updated 5 hours ago

Was this helpful?