[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseDropdown](./x-components.basedropdown.md) ## BaseDropdown variable Dropdown component that mimics a Select element behavior, but with the option to customize the toggle button and each item contents. **Signature:** ```typescript _default: import("vue").DefineComponent; required: true; }; modelValue: { type: PropType; validator: (v: any) => boolean; required: true; }; ariaLabel: StringConstructor; animation: { type: (StringConstructor | ObjectConstructor | FunctionConstructor)[]; default: () => import("vue").DefineComponent<{}, {}, any>; }; searchTimeoutMs: { type: NumberConstructor; default: number; }; }>, { hasToggleSlot: boolean; closeAndFocusToggleButton: () => void; dropdownCSSClasses: import("vue").ComputedRef<{ 'x-dropdown--is-open': import("vue").Ref; }>; emitSelectedItemChanged: (item: DropdownItem) => void; highlightFirstItem: () => void; highlightLastItem: () => void; highlightNextItem: () => void; highlightPreviousItem: () => void; highlightedItemIndex: import("vue").Ref; isOpen: import("vue").Ref; itemsButtonRefs: import("vue").Ref<(HTMLButtonElement | null)[], (HTMLButtonElement | null)[]>; itemsCSSClasses: import("vue").ComputedRef<{ 'x-dropdown__item--is-selected': boolean; 'x-dropdown__item--is-highlighted': boolean; }[]>; listId: string; open: () => boolean; rootRef: import("vue").Ref; toggle: () => boolean; toggleButtonRef: import("vue").Ref; updateSearchBuffer: (event: KeyboardEvent) => void; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly; required: true; }; modelValue: { type: PropType; validator: (v: any) => boolean; required: true; }; ariaLabel: StringConstructor; animation: { type: (StringConstructor | ObjectConstructor | FunctionConstructor)[]; default: () => import("vue").DefineComponent<{}, {}, any>; }; searchTimeoutMs: { type: NumberConstructor; default: number; }; }>> & Readonly<{ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; }>, { animation: string | Function | Record; searchTimeoutMs: number; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> ```