MSQ Design System

A versatile dropdown component with multiple types: Token (multi-select), Location (with search), and P2U (single select).

Installation

The Dropdown component is part of the design system. Import it from the UI package.

import { Dropdown } from "@/components/ui/dropdown"

Usage

Use Dropdown with a trigger and options. Copy the example below to get started.

Examples

Token Dropdown (Multi-select)

Select Tokens

Location Dropdown (With Search)

Location

P2U Dropdown (Single Select)

Controlled Component

Multiple Selection

API Reference

The Dropdown component displays a list of options when the trigger is clicked. It supports value, onValueChange, options, and placeholder. See the interface below for full prop details.

interface DropdownOption {
  value: string
  label: string
  icon?: React.ReactNode
  disabled?: boolean
}

interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  /**
   * Dropdown state: collapsed or expanded
   */
  state?: "collapsed" | "expanded"
  /**
   * Dropdown type: Token, location, or P2U
   */
  type?: "Token" | "location" | "P2U"
  /**
   * Placeholder text
   */
  placeholder?: string
  /**
   * Label text (shown above dropdown when expanded)
   */
  label?: string
  /**
   * Selected value(s)
   */
  value?: string | string[]
  /**
   * Options for the dropdown
   */
  options?: DropdownOption[]
  /**
   * Whether multiple selection is allowed (for Token type)
   */
  multiple?: boolean
  /**
   * Callback when selection changes
   */
  onChange?: (value: string | string[]) => void
  /**
   * Callback when dropdown is opened/closed
   */
  onOpenChange?: (open: boolean) => void
  /**
   * Search value (for location type)
   */
  searchValue?: string
  /**
   * Callback when search value changes (for location type)
   */
  onSearchChange?: (value: string) => void
  /**
   * Width of the dropdown
   */
  width?: string | number
}

Dropdown