QUI VSCode0.7.0

Dropdown

import {Dropdown} from "@qui/react-vscode"

Guidelines

  • Each dropdown item should have a unique value prop. If value is not provided, the value will be inferred from the HTML text content of the item.

Examples

Showcase

Dark Modern
import {ReactNode} from "react"


import {
  Dropdown,
  DropdownInput,
  ListDescription,
  ListDetails,
  ListItem,
  ListLabel,
} from "@qui/react-vscode"


export default function Showcase(): ReactNode {
  return (
    <Dropdown anchor={<DropdownInput defaultValue="Select an option" />}>
      <ListItem startIcon="remote-explorer" value="microsoft/vscode">
        <ListLabel>microsoft/vscode</ListLabel>
      </ListItem>
      <ListItem startIcon="remote-explorer" value="microsoft/vscode-codicons">
        <ListLabel>microsoft/vscode-codicons</ListLabel>
        <ListDescription>Last used 2 days ago</ListDescription>
        <ListDetails>main • 4 cores, 8GB RAM, 32GB storage</ListDetails>
      </ListItem>
      <ListItem startIcon="remote-explorer" value="microsoft/vscode-docs">
        <ListLabel>microsoft/vscode-docs</ListLabel>
        <ListDescription>Last used 3 days ago</ListDescription>
        <ListDetails>main • 8 cores, 16GB RAM, 32GB storage</ListDetails>
      </ListItem>
    </Dropdown>
  )
}

Variants

Dark Modern
import type {ReactElement} from "react"


import {Dropdown, DropdownInput} from "@qui/react-vscode"


export default function InputVariants(): ReactElement {
  return (
    <div className="flex flex-col gap-4">
      <Dropdown anchor={<DropdownInput defaultValue="Select an option" />} />
      <Dropdown
        anchor={
          <DropdownInput defaultValue="Select an option" variant="ghost" />
        }
      />
    </div>
  )
}

API

Name & DescriptionOption(s)Default
anchor
*
The interactive element that will be used to compute the position of the floating panel. If supplied as an element, event handlers will be applied for triggering the open/close state of the menu on interaction. This can also be supplied as a function that returns an element, or a reference to a ReactElement.
| Element
| ((
    props: Props,
  ) => Element)
| RefObject<
    HTMLElement | object
  >
as
The component used for the root node. It can be a React component or element.
| ElementType
| ComponentType
'div'
children
React children prop.
ReactNode
defaultValue
Optional default value in uncontrolled mode.
| string
| number
enableValueToggle
If true, the selected value will be reset if it is selected from the dropdown.
boolean
focusItemOnOpen
If true, the menu's first item will automatically gain focus when the component is opened. This is recommended for optimal accessibility.
boolean
true
id
id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
string
loop
Determines whether focus should loop around when navigating past the first or last item. This creates a continuous cycle through the menu items using arrow keys.
boolean
true
onValueChange
Event handler called when the selected item of the menu changes.
  • valuethe updated value.
  • reasonthe cause of the change event.
  • eventthe event associated with the change. Can be null.
(
  value: string | number,
  reason:
    | 'item-selected'
    | 'reset',
  event?:
    | MouseEvent
    | KeyboardEvent
    | TouchEvent
    | PointerEvent,
) => void
openOnArrowKeyDown
Whether pressing an arrow key on the navigation’s main axis opens the floating element.
boolean
true
openOnFocus
If true, the component will show when the anchor element is focused. This property is ignored if open is supplied.
boolean
false
openOnHover
If true, the component will show when the anchor element is hovered. This property is ignored if open is supplied.
boolean
false
restoreFocus
If true, focus will be restored to the component's anchor element on close.
boolean
true
value
Optional controlled state of the selected menu item.
| string
| number
Type
| Element
| ((
    props: Props,
  ) => Element)
| RefObject<
    HTMLElement | object
  >
Description
The interactive element that will be used to compute the position of the floating panel. If supplied as an element, event handlers will be applied for triggering the open/close state of the menu on interaction. This can also be supplied as a function that returns an element, or a reference to a ReactElement.
Type
| ElementType
| ComponentType
Default
'div'
Description
The component used for the root node. It can be a React component or element.
Type
ReactNode
Description
React children prop.
Type
| string
| number
Description
Optional default value in uncontrolled mode.
Type
boolean
Description
If true, the selected value will be reset if it is selected from the dropdown.
Type
boolean
Default
true
Description
If true, the menu's first item will automatically gain focus when the component is opened. This is recommended for optimal accessibility.
Type
string
Description
id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
Type
boolean
Default
true
Description
Determines whether focus should loop around when navigating past the first or last item. This creates a continuous cycle through the menu items using arrow keys.
Type
(
  value: string | number,
  reason:
    | 'item-selected'
    | 'reset',
  event?:
    | MouseEvent
    | KeyboardEvent
    | TouchEvent
    | PointerEvent,
) => void
Description
Event handler called when the selected item of the menu changes.
  • valuethe updated value.
  • reasonthe cause of the change event.
  • eventthe event associated with the change. Can be null.
Type
boolean
Default
true
Description
Whether pressing an arrow key on the navigation’s main axis opens the floating element.
Type
boolean
Default
false
Description
If true, the component will show when the anchor element is focused. This property is ignored if open is supplied.
Type
boolean
Default
false
Description
If true, the component will show when the anchor element is hovered. This property is ignored if open is supplied.
Type
boolean
Default
true
Description
If true, focus will be restored to the component's anchor element on close.
Type
| string
| number
Description
Optional controlled state of the selected menu item.
Name & DescriptionOption(s)Default
as
The component used for the root node. It can be a React component or element.
| ElementType
| ComponentType
'button'
defaultValue
The default label to show when a value isn't selected.
| string
| number
value
Controlled value override. This label will show instead of the dropdown's currently selected item.
| string
| number
variant
The style variant of the dropdown input. Primarily governs the background color and border.
DropdownInputVariant
'filled'
Type
| ElementType
| ComponentType
Default
'button'
Description
The component used for the root node. It can be a React component or element.
Type
| string
| number
Description
The default label to show when a value isn't selected.
Type
| string
| number
Description
Controlled value override. This label will show instead of the dropdown's currently selected item.
Type
DropdownInputVariant
Default
'filled'
Description
The style variant of the dropdown input. Primarily governs the background color and border.
Previous
Disclosure
Next
Field
Guidelines
Examples
Showcase
Variants
API
DropdownProps
DropdownInputProps
Copyright © 2025 QUALCOMM incorporated. All rights reserved.