Dropdown

Dropdown is LibreChat's single-value select. In a form, use the field variant, which matches Input. For a menu of actions instead of values, use DropdownPopup.

import { useId, useState } from 'react'
import { Dropdown } from '@librechat/client'

const MODELS = [
  { value: 'gpt-4o', label: 'GPT-4o' },
  { value: 'claude-sonnet', label: 'Claude Sonnet' },
  { value: 'gemini-pro', label: 'Gemini Pro' },
]

export default function DropdownField() {
  const id = useId()
  const [model, setModel] = useState('')
  return (
    <div className="grid w-full max-w-sm gap-2">
      <span id={id} className="text-text-primary text-sm font-medium">
        Model
      </span>
      <Dropdown
        variant="field"
        aria-labelledby={id}
        value={model}
        onChange={setModel}
        placeholder="Choose a model"
        options={MODELS}
      />
    </div>
  )
}

Props

Prop	Type	Default	Description
`value`	`string`		The selected option's value.
`onChange`	`(value: string) => void`		Called with the picked option's value.
`options`	`Array<string \| { value, label, icon?, disabled? } \| { divider: true }>`		The choices, in order.
`variant`	`'default' \| 'field' \| 'compact'`	`'default'`	`field` matches `Input` in forms; `compact` fits toolbars.
`placeholder`	`string`		Shown in the secondary tone while nothing is chosen.
`searchable`	`boolean`	`false`	Adds a search field at the top of the list.
`aria-labelledby`	`string`		Points at the field's visible label. The selected value is announced with it.
`aria-invalid`	`boolean`		Marks a `field` dropdown invalid.
`disabled`	`boolean`	`false`	Blocks opening the list.
`portal`	`boolean`	`true`, or `false` inside a dialog	Renders the list in a portal. Inside a dialog the list stays in the dialog so focus and screen readers can reach it.

Accessibility

The trigger is a combobox that opens a listbox. Name it with aria-labelledby pointing at a visible label, or aria-label when there is none.

Key	Action
`Enter`, `Space` or `↓`	Opens the list
`↑` and `↓`	Move through the options
`Enter`	Picks the active option and closes the list
`Escape`	Closes the list without changing the value

Dropdown

Props

Accessibility

On this page