🎉Save 15% on all Justd Blocks for a limited time during the launch!
Components

Combo Box

Drop down a list, type to narrow it down, like flipping through a phone book with a quick finder tool.

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 plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Combo Box's decked out with several components to make it bangin'.

Buttons be the real MVPs, man! They're all about gettin' stuff done, whether it’s slamming that form submit or hoppin' to another page.
Dropdown's a slick component used in other parts of your project that need dropdown, like menu, select, combo box, and more.
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.
Hover or click to see more content, like popping open a tent, useful for additional info without leaving the context..

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

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.

Previous
Tooltip
Next
Multiple Select