Dropdown

forms

Custom dropdown select with trigger button, floating menu, keyboard navigation (Enter/Space/Escape/ArrowDown), outside-click close, selected item highlight, and placeholder support. Uses aria-haspopup and role=listbox.

Import

typescript
import { Dropdown } from "packages/ui/src";

Props

DropdownProps

PropTypeRequired
optionsDropdownOption[]Yes
valuestringNo
onChange(value: string) => void, placeholder?: stringNo

Examples

Dropdown

Custom dropdown select with keyboard navigation, outside-click close, and selected state styling.

Basic

Framework

Status

Pre-Selected

Selected: button

Form Context

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionCustom dropdown select with trigger button, floating menu, keyboard navigation (Enter/Space/Escape/ArrowDown), outside-click close, selected item highlight, and placeholder support. Uses aria-haspopup and role=listbox.
PropsDropdownProps (options: DropdownOption[], value?: string, onChange?: (value: string) => void, placeholder?: string)
Statesclosed, open, with-selection, placeholder, hover-item
A11y
  • Trigger has aria-haspopup=listbox and aria-expanded
  • Menu has role=listbox with aria-label
  • Items have role=option with aria-selected
  • Keyboard: Enter/Space toggle, Escape close, ArrowDown open
Responsive
  • Min-width from CSS
  • Menu matches trigger width
Motion
  • No animation by default
Token Dependencies
  • components.dropdown.triggerBackground
  • components.dropdown.triggerBorder
  • components.dropdown.triggerBorderRadius
  • components.dropdown.triggerPadding
  • components.dropdown.triggerColor
  • components.dropdown.triggerFontSize
  • components.dropdown.menuBackground
  • components.dropdown.menuBorder
  • components.dropdown.menuBorderRadius
  • components.dropdown.menuShadow
  • components.dropdown.menuMaxHeight
  • components.dropdown.itemPadding
  • components.dropdown.itemColor
  • components.dropdown.itemHoverBackground
  • components.dropdown.itemSelectedColor
  • components.dropdown.placeholderColor
  • components.dropdown.chevronColor
  • components.dropdown.zIndex
Content Slotsoptions[].label (string), placeholder (string)
CMS Bindings
  • Option list from CMS taxonomy
  • Default value from CMS field
Test Cases
  • Renders trigger with placeholder
  • Opens menu on click
  • Shows all options
  • Selects option on click
  • Closes on selection
  • Shows selected label
  • Has aria-haspopup
  • Passes className through