Dropdown

A bordered trigger surface for a menu.

Pass options and it is a working menu; leave it off and it is only a styled box. With options it owns open/close, selection, and arrow-key navigation — add searchable for a filter field. Without them it renders its children and tracks nothing, which is what you want when you are supplying your own menu.

Usage

dropdown-demo.tsx

import { Dropdown } from 'trivela-ui';

export function Example() {
  return (
    <Dropdown
      searchable
      options={['Newest', 'Oldest', 'Name']}
      defaultValue="Newest"
    />
  );
}

Examples

Searchable

With a long list, searchable puts a filter field above the options. Typing narrows the list; arrows and Enter still work throughout.

Plain and controlled

Without searchable it is a plain menu. Pass value and onValueChange to drive the selection yourself; leave both off and the component keeps its own.

Styling only, no options

Omit options and Dropdown is the box and nothing more — no state, no menu — for when you are wiring up your own. Children lay out inline, so a label plus a chevron needs no extra wrapper.

Sort by: Newest

Filter

API Reference

Prop	Type	Default	Description
options	(string \| { value: string; label?: string; disabled?: boolean })[]	—	The menu items. Supplying them turns Dropdown from a styled box into a working menu.
searchable	boolean	false	Adds a filter field above the options.
value / defaultValue	string	—	The selected option's value. Pass value for a controlled menu, defaultValue to seed the component's own state.
onValueChange	(value: string) => void	—	Fires on commit with the chosen option's value.
onSelect	(option: { value: string; label: string }) => void	—	Same moment as onValueChange, with both halves of the option.
placeholder	ReactNode	'Select…'	Trigger content before anything is chosen. Ignored when children are given.
searchPlaceholder	string	'Search…'	Placeholder and accessible name for the filter field.
emptyMessage	string	'No results found.'	Shown when the filter matches nothing.
filter	(option, query) => boolean	case-insensitive label match	Replace the matching rule — fuzzy search, matching on value, and so on.
variant	'solid' \| 'ghost' \| 'outline' \| 'subtle'	'solid'	Style variant for the component.
color	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'	'primary'	Color scale used by the component.
className	string	—	Merged with the generated classes via cn().
...props	HTMLAttributes<HTMLDivElement>	—	All native attributes are forwarded to the root element.