Left Liquid Background
Right Liquid Background

Dropdown

Dropdowns enable users to select a single option from a contextual list. It's a compact, flexible UI pattern ideal for filters, forms, and segmented controls.

Quick Links

Installation

Install the dropdown individually or as part of the complete @aristobyte-ui library.

Installation of Dropdown

The above command is for individual installation of Dropdown only. You may skip this step if @aristobyte-ui is already installed globally.

Package Manager

Individual Package

Install only the dropdown if you need specific functionality.

Full Library

Skip this if you have the complete @aristobyte-ui already installed.

Import

Choose between individual package imports or global library imports based on your project's needs and bundle size requirements.

Import Dropdown

The Dropdown component provides a minimal yet accessible selection UI for various use cases. It supports dynamic options, disabled states, and custom styling. Import it as shown below to enrich your data selection flows:

Import Method

;

Individual Package

Import directly from the dropdown package for optimal tree-shaking and smaller bundle sizes.

Recommended for component-specific usage

Global Library

Import from the main library package when using multiple components from AristoByte UI.

Recommended for component-specific usage

Basic Usage Example

Basic implementation of the component using default properties. Suitable for general-purpose interactions.

Disabled

Demonstrates a Dropdown component in a disabled state. All options and interactions are inactive, ensuring that users cannot modify the selection.

Preview

Guidelines

    Operational Use Cases

  • Freeze selection while dependencies load or validate.

  • Gate access when user lacks required permissions.

  • Disable when server-side flags indicate the selection is currently immutable.

  • Use disabled dropdowns as placeholders while remote option lists are being fetched.

    Developer Best Practices

  • Explain disabled reason via tooltip/help text.

  • Maintain readable value even when disabled.

  • Preserve semantic markup (select/option) for accessibility even when visually disabled.

  • Document keyboard behavior and focus management for disabled dropdowns.

Appearance

Illustrates all available Dropdown appearances — solid, glowing, outline, outline-dashed, no-outline — across variants (default, primary, secondary, success, error, warning). Useful for visual reference and styling consistency. Use variant to convey semantic intent, while appearance controls decorative rendering.

Preview

Guidelines

    Design Options

  • Use outline for standard forms; solid for high-contrast UIs.

  • Use no-outline in minimal surfaces with strong backgrounds.

  • Choose glowing only when the dropdown needs to attract attention in onboarding or spotlight flows.

  • Prefer dashed outlines for experimental UI patterns to indicate tentative styling.

    Implementation Notes

  • Keep placeholder text distinct from selected value.

  • Ensure focus/hover states are clearly visible.

  • Provide accessible labeling and ensure appearance changes do not remove focus indicators.

  • Test appearance variants across different density themes to ensure consistent spacing and legibility.

Props Reference

Complete reference for all props available on Dropdown, DropdownOption component(s), including type definitions, default values, and usage examples.

  • Dropdown

    • Core Props

      • children

        React.ReactElement<IDropdownOption> | React.ReactElement<IDropdownOption>[]

      • value

        string

      • button

        Omit<IButton, 'children' | 'dangerouslySetInnerHTML'>default: {}

    • State Props

      • disabled

        booleandefault: false

      • initiallyOpened

        booleandefault: false

      • choice

        'multiple' | 'single'default: 'single'

    • Visual Props

      • variant

        'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning'default: 'default'

      • appearance

        'solid' | 'outline' | 'outline-dashed' | 'no-outline' | 'glowing'default: 'outline'

    • Advanced Props

      • placeholder

        stringdefault: 'Select'

      • className

        stringdefault: ''

      • style

        React.CSSPropertiesdefault: {}

  • DropdownOption

    • Core Props

      • children

        string

      • value

        string

    • Visual Props

      • variant

        'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning'

      • appearance

        'solid' | 'outline' | 'outline-dashed' | 'no-outline' | 'glowing'

    • State Props

      • disabled

        booleandefault: false

      • choice

        'multiple' | 'single'default: 'single'

    • Advanced Props

      • description

        string

      • icon

        string

      • selectedValues

        string[]

      • style

        React.CSSPropertiesdefault: {}

Viewing Unit with ID dropdown