Dropdown

The Dropdown component is a container for displaying selectable options in a dropdown menu. It provides a way to present a list of selectable options with various styling and interaction capabilities.

Basic usage

A simple dropdown container with options.

Basic Usage

const [selected, setSelected] = useState("");

const handleSelect = (value: string) => {
  setSelected(value);
};

return (
  <Dropdown
    aria-label="Options"
    selectedOption={selected}
    onSelect={handleSelect}
    padding="4"
    radius="m-4"
  >
    <Option
      label="Option 1"
      value="option1"
      selected={selected === "option1"}
      onClick={handleSelect}
    />
    <Option
      label="Option 2"
      value="option2"
      selected={selected === "option2"}
      onClick={handleSelect}
    />
    <Option
      label="Option 3"
      value="option3"
      selected={selected === "option3"}
      onClick={handleSelect}
    />
  </Dropdown>
);

With icons

Enhance dropdown options with icons for better visual communication.

With Icons

const [selected, setSelected] = useState("");

const handleSelect = (value: string) => {
  setSelected(value);
};

return (
  <Dropdown
    aria-label="Options"
    selectedOption={selected}
    onSelect={handleSelect}
    padding="8"
    radius="m-8"
  >
    <Option
      label="Edit"
      value="edit"
      prefix={<Icon name="edit" size="xs" />}
      selected={selected === "edit"}
      onClick={handleSelect}
    />
    <Option
      label="Duplicate"
      value="duplicate"
      prefix={<Icon name="copy" size="xs" />}
      selected={selected === "duplicate"}
      onClick={handleSelect}
    />
    <Line marginY="8" />
    <Option
      label="Delete"
      value="delete"
      prefix={<Icon name="delete" size="xs" />}
      danger
      selected={selected === "delete"}
      onClick={handleSelect}
    />
  </Dropdown>
);

With descriptions

Add descriptive text to dropdown options for additional context.

Description

const [selected, setSelected] = useState("");

const handleSelect = (value: string) => {
  setSelected(value);
};

return (
  <Dropdown
    aria-label="Options"
    selectedOption={selected}
    onSelect={handleSelect}
    padding="8"
    radius="m-8"
  >
    <Option
      label="Apple"
      value="apple"
      description="A fruit that grows on trees"
      selected={selected === "apple"}
      onClick={handleSelect}
    />
    <Option
      label="Banana"
      value="banana"
      description="A curved yellow fruit"
      selected={selected === "banana"}
      onClick={handleSelect}
    />
    <Option
      label="Carrot"
      value="carrot"
      description="An orange root vegetable"
      selected={selected === "carrot"}
      onClick={handleSelect}
    />
  </Dropdown>
);

Custom styling

Customize the appearance of the dropdown with Flex props.

Custom styling

const [selected, setSelected] = useState("");

const handleSelect = (value: string) => {
  setSelected(value);
};

return (
  <Dropdown
    aria-label="Options"
    selectedOption={selected}
    onSelect={handleSelect}
    radius="m-8"
    border="brand-alpha-medium"
    background="brand-alpha-weak"
    shadow="xl"
    padding="8"
  >
    <Option
      label="Small"
      value="small"
      selected={selected === "small"}
      onClick={handleSelect}
    />
    <Option
      label="Medium"
      value="medium"
      selected={selected === "medium"}
      onClick={handleSelect}
    />
    <Option
      label="Large"
      value="large"
      selected={selected === "large"}
      onClick={handleSelect}
    />
  </Dropdown>
);

Accessibility

The Dropdown component follows accessibility best practices:

Uses role="listbox" for the dropdown container
Provides aria-selected state for selected options
Supports keyboard navigation
Properly manages focus when opening and closing

API reference

	Type	Default
selectedOption	string	—
children	React.ReactNode	—
onEscape	() => void	—
onSelect	(event: string) => void	—
disabled Prevent interaction with the dropdown.	boolean	false
…and every FlexProps prop	inherited	—

DropdownWrapper - A container for creating dropdown menus with positioning and state management
Option - Individual selectable items used within dropdowns

Basic usage

With icons

With descriptions

Custom styling

Accessibility

API reference

Related components