Figma ComboBox

Preview

Figma ComboBox

Figma ComboBox Component

The ComboBox component is designed to autocomplete input and provide the user with a list of suggestions from which to choose.

You can customize the pop-up size and elements available in the Combobox by adjusting the nested Dropdown List component.

ComboBox UI Best Practices

Provide autocomplete suggestions as the user types;
Allow users to navigate options using arrow keys and select with Enter;
Use predesigned variants to distinguish between focused, hover, and default states.

Combobox Anatomy

Set	Variants	Properties
Combobox	24	Type Default, SecondarySize Small, Medium, LargeState Default, Disabled, Hover, Focused

Combobox is one set of 24 variants — Default and Secondary types, Small, Medium and Large sizes, Default, Disabled, Hover and Focused states — an autocomplete input whose pop-up list is a nested, resizable instance.

Combobox AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a combobox component in Figma as one set of 24 variants: Default and Secondary types, Small, Medium and Large sizes, and Default, Hover, Focused and Disabled states. The field: a rounded input with placeholder text, an optional leading search icon and a chevron on the right; Hover tints the border, Focused shows an accent border with the typed text and a caret, Disabled drops the opacity. Below the Focused variants attach the suggestions pop-up as a nested instance: a floating card with a soft shadow listing six options, each with an optional icon, the matched substring in bold, a highlighted active row and a Selected row with a tick, plus an empty-state row reading No results. Expose the pop-up's item count and height so it resizes without detaching. Wire the prototype so clicking Default opens Focused with the list, pressing arrow keys moves the highlight and Enter writes the option back into the field. Keep spacing per size on auto layout and colours on variables.

Source