Thành phần

Combobox

Filterable single or multiple select on Base UI Combobox; ink rules, tint-1 highlight with an ink rule, no shadow.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Desk

The desk that commissioned the story.

Install

bash

npx shadcn add @eloquent/combobox

It installs @eloquent/input-group (and with it input, textarea and button).

Usage

tsx

import { Field, FieldLabel } from "@/components/ui/field";
import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox";

const desks = [
  { value: "politics", label: "Politics" },
  { value: "economy", label: "Economy" },
];

<Field>
  <FieldLabel>Desk</FieldLabel>
  <Combobox items={desks}>
    <ComboboxInput placeholder="Search desks" triggerLabel="Show desks" showClear clearLabel="Clear desk" />
    <ComboboxContent>
      <ComboboxEmpty>No desk found.</ComboboxEmpty>
      <ComboboxList>
        {(item) => <ComboboxItem key={item.value} value={item}>{item.label}</ComboboxItem>}
      </ComboboxList>
    </ComboboxContent>
  </Combobox>
</Field>

Icon-only buttons need a name, so triggerLabel, clearLabel and a chip's removeLabel are required props while the button shows. For several values, use multiple with ComboboxChips, ComboboxChip, ComboboxChipsInput and useComboboxAnchor (see the states below).

States

Grouped

Several desks

Politics

Backspace on an empty input moves to the last chip.

Desk

Choose a desk.

Edition

State	Treatment
Input	As Input group: 1px ink form line, 2px ink outline on focus
Highlighted item	`tint-1` fill and a 2px ink left rule (keyboard or pointer)
Selected item	Ink check icon
Chip	`tint-1` with a 1px ink border; focused chip inverts to ink
Invalid	2px ink rule; `Field` adds the ink ! icon and message
Disabled	Halftone rule and text, `cursor-not-allowed`
Popup	Paper, 1px ink rule, no shadow

Keyboard

Key	Action
Tab / Shift+Tab	Move to and from the input
Type	Filter the list; the popup opens
Down / Up Arrow	Open the popup, then move the highlight
Enter	Select the highlighted item
Escape	Close the popup
Left Arrow (start of the input, multiple)	Focus the last chip
Backspace / Delete (on a chip)	Remove it

Vietnamese

Ban

Ban đã đặt bài viết này.

Ink adaptation

Upstream shadcn's rounded popup, shadow, scale and fade animation and grey highlight are removed. The highlighted item uses tint-1 plus a 2px ink rule, so the cue is not tone alone. The trigger and clear are ghost buttons at 44px; the chip remove button is 32px with a hit area extended to 44px. Built on Base UI Combobox.