Components

Combobox

Choose one or several options from a list narrowed by typing; supports server results and adding new options.

Storybook: Storybook
Source: Source

When to use

Use Combobox to choose from a long list by typing: a city, a person, a tag. The list can come from a server, several choices can be made and the user can add an option that is not in the list.

When not to use

For a short closed list (about 15): Use Select.
For free text: Use TextInput.
For a few visible options: Use CheckboxGroup or radio buttons.
For app-wide search and commands: Use Command.

Anatomy

City

The list narrows as you type.

import { Combobox, Provider } from '@bigbang/ui';

const cities = ['Adana', 'Ankara', 'Antalya', 'Bursa', 'İstanbul', 'İzmir', 'Konya'].map((city) => ({
  value: city.toLocaleLowerCase('tr'),
  label: city,
}));

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Combobox label="City" items={cities} placeholder="Search for a city" description="The list narrows as you type." className="max-w-80" />
    </Provider>
  );
}

Label: The visible name; bound to the input.
Input: The typed text filters the list. With multiple, chips sit before the input.
Chevron button: Opens the list. With showClear, a clear button takes its place while a value is chosen.
List: The filtered options; the chosen one has a check mark.
Status row: Loading, no results or “Add …”.

Behaviour

Typing opens the list and filters it ignoring case in the Provider’s language; “i” and “İ” follow Turkish rules.
Up and down arrows highlight options, Enter chooses, Escape closes. Disabled options cannot be chosen.
With a single choice the chosen label fills the input. With multiple the choice becomes a chip and the input clears; Backspace in an empty input removes the last chip.
With onCreate, an “Add …” row appears at the end of the list when the text matches no label.
For server results a loading row shows and is announced while loading is set; “No results” appears once loading ends.
The list grows and fades in from the field and closes faster; the chevron stays still and a new chip fades in. With reduced motion only the opacity changes.
With grouped items, each group shows under its heading; filtering runs inside the groups and an empty group is hidden. The create row sits in a last group without a heading.

Guidelines

Always give a visible label; the placeholder is a hint.
For server results, group requests with a short delay.
If a multiple choice can grow large, list the chosen items outside the field.
Turn on adding options only for lists that expect user input (such as tags).

Content

The label says what is chosen: “City”.
The placeholder says the action: “Search for a city”.

Turkish	English
Sonuç bulunamadı	No results
Yükleniyor	Loading
“Kiraz” ekle	Add “Kiraz”
Seçimi temizle	Clear selection
Ankara kaldır	Remove Ankara

Glass

Under a Provider material="glass", the option list turns glass. The field itself is always solid. material="solid" keeps it solid.

Select: A single choice from a short closed list.
TextInput: Free text.
CheckboxGroup: Several choices from visible options.