Components

Combo Box

An advanced dropdown component that allows users to search, filter, and select options dynamically for a smoother selection experience.

Basic

A combo box combines a text input with a listbox, allowing users to filter options to match what they're looking for.

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Combo Box comes packed with several components to enhance functionality and provide a seamless experience.

Buttons play a crucial role in functionality, whether for submitting a form or navigating to another page.
A pop-up menu that reveals a list of selectable options, commonly used for navigation, filters, or form inputs.
ListBox are designed to present and manage lists of options or data entries, allowing users to view and select from multiple choices efficiently.
Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.
A small, floating UI element that appears near a trigger to show contextual information or actions.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

Using Avatars

The combo box can be configured to display avatars instead of just regular text.

Section

A combo box can display items grouped together in sections.

Validation

If a user submits the form without selecting an item, an error message will appear.

Controlled

There are two ways to control the combo box: using the onInputChange prop or the onSelectionChange prop. These methods serve different purposes, as illustrated in the examples below. Both examples follow the same approach, defining id and textValue for the options.

When you only need the textValue of the selected option, use the onInputChange prop. However, if you need to obtain the actual id of the selected option, the onSelectionChange prop is the appropriate choice.

Input

This combo box is controlled by the onInputChange prop.

You have selected:

Selection

This combo box is controlled by the onSelectionChange prop.

You have selected:

Readonly

When the combo box is in a readonly state, it cannot be edited.

Label

If the children of a ComboBox.Option is a string, the ComboBox.Label will automatically wrap it. However, if you're including additional elements like an icon or avatar, you'll need to manually wrap the label, as shown below:

<ComboBox.Option id={item.id} textValue={item.name}>
  <Avatar src={item.image_url} />
  <ComboBox.Label>{item.name}</ComboBox.Label>
</ComboBox.Option>

Disabled

When the combo box is disabled, it becomes non-interactive and cannot be edited.

Get premium Blocks

Create stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.
Previous
Tooltip
Next
Multiple Select