Skip to content
Altitude Standalone Components

Dropdown Field

The Dropdown Field component provides a complete form field for selecting options from a dropdown menu with built-in label, validation, search functionality, and error handling.

Example

Select a product category

Please select a state

Usage

import DropdownField from "@altitude/ui/react/components/fields/dropdown-field";


export default function ProfileForm() {
  const [country, setCountry] = React.useState("");


  const handleCountryChange = (e) => {
    setCountry(e.target.value);
  };


  return (
    <form>
      {/* Uncontrolled dropdown */}
      <DropdownField
        id="gender"
        name="gender"
        label="Gender"
        options={["Male", "Female", "Non-binary", "Prefer not to say"]}
        placeholder="Select your gender"
        required={false}
      />


      {/* Controlled dropdown with search */}
      <DropdownField
        id="country"
        name="country"
        label="Country"
        options={[
          "United States",
          "United Kingdom",
          "Canada",
          "Australia",
          "Germany",
        ]}
        enableSearch={true}
        searchPlaceholder="Search for a country"
        placeholder="Select your country"
        value={country}
        onChange={handleCountryChange}
        required={true}
      />


      {/* More form fields */}
      <button type="submit">Save Profile</button>
    </form>
  );
}

Props

PropTypeRequiredDescription
idstringNoHTML ID for the field
namestringNoHTML name attribute for the field
labelstringNoLabel text for the field
helperTextstringNoHelper text displayed below the field
errorMessagestringNoError message displayed when aria-invalid is true
placeholderstringNoPlaceholder text for the dropdown
requiredbooleanNoWhether the field is required (default: false)
aria-invalidbooleanNoWhether the field has an error (default: false)
disabledbooleanNoWhether the field is disabled (default: false)
optionsstring[]NoArray of option strings to display in the dropdown
enableSearchbooleanNoEnable search functionality in the dropdown (default: false)
noOptionsMessagestringNoMessage to display when no options are available (default: “No options available”)
searchPlaceholderstringNoPlaceholder text for the search input (default: “Search…“)
valuestringNoCurrent selected value (for controlled component)
onChangefunctionNoCallback when selection changes (e) => void

Implementation Details

The Dropdown Field component combines a field wrapper and a dropdown component:

  • Uses FieldWrapper to handle labels, error states, and helper text
  • Uses the base Dropdown UI component from the dropdown directory
  • Supports both standard and searchable dropdown patterns
  • Automatically handles validation states and error messaging
  • Can be used as both controlled and uncontrolled component