Skip to content
Altitude Standalone Components

Dropdown

The Dropdown component provides a customizable select menu with support for searching, keyboard navigation, and accessibility features.

Example

Usage

import Dropdown from "@altitude/ui/react/ui/dropdown/dropdown";


export default function DropdownExample() {
  const [selectedValue, setSelectedValue] = React.useState("");


  const handleChange = (e) => {
    setSelectedValue(e.target.value);
  };


  return (
    <div>
      {/* Basic dropdown */}
      <Dropdown
        options={["Option 1", "Option 2", "Option 3"]}
        placeholder="Select an option"
      />


      {/* Dropdown with search */}
      <Dropdown
        options={["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig"]}
        placeholder="Select a fruit"
        enableSearch={true}
        searchPlaceholder="Search fruits..."
      />


      {/* Controlled dropdown */}
      <Dropdown
        options={["Red", "Green", "Blue", "Yellow"]}
        placeholder="Select a color"
        value={selectedValue}
        onChange={handleChange}
        required={true}
      />
    </div>
  );
}

Props

PropTypeRequiredDescription
optionsstring[]YesArray of options to display in the dropdown
placeholderstringNoPlaceholder text when no option is selected
disabledbooleanNoWhether the dropdown is disabled
enableSearchbooleanNoEnable search functionality (default: false)
requiredbooleanNoWhether a selection is required
errorbooleanNoWhether to show error styling
errorMessagestringNoError message to display when in error state
noOptionsMessagestringNoMessage when no options match search (default: “No options available”)
searchPlaceholderstringNoPlaceholder for search input (default: “Search…“)
classNamestringNoAdditional CSS classes for styling
onChangefunctionNoHandler for value changes: (e: {target: {name, value}}) => void
valuestringNoCurrent selected value (controlled component)
namestringNoForm field name
idstringNoHTML ID attribute

Features

  • Search Functionality: Easily filter through options with the built-in search
  • Keyboard Navigation: Full keyboard support for accessibility
  • Form Integration: Works seamlessly in forms with proper value handling
  • Customizable: Supports custom styling and placeholders
  • Accessibility: ARIA attributes and keyboard interactions for accessibility compliance

Implementation Details

The Dropdown component is built using several supporting modules:

  • useDropdown: Custom hook for managing dropdown state and behavior
  • focusManagement: Utilities for keyboard focus handling
  • keyboardNavigation: Support for keyboard interaction
  • types: TypeScript type definitions
  • utils: Helper functions

The component provides a robust implementation with consideration for accessibility, keyboard navigation, and user experience best practices.