Combobox

A searchable dropdown component with keyboard navigation support.

1. Import

Import the Combobox component from the design system.

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/design-system/components/ui/combobox"

2. Props

Combobox component props.

Prop	Type	Default
items	string[]	--
value	string	--
defaultValue	string	--
onValueChange	(value: string) => void	--
placeholder	string	--
disabled	boolean	false
className	string	--

3. Sizes

Available sizes for the Combobox components.

SingleCombobox Sizes

Extra Small

Chosen department...

Small

Chosen department...

Medium

Chosen department...

Large

Chosen department...

MultipleCombobox Sizes

Extra Small*

Chosen phòng ban...

Small*

Chosen phòng ban...

Medium*

Chosen phòng ban...

Large*

Chosen phòng ban...

composed

SingleCombobox

Combobox chọn một giá trị duy nhất. Hỗ trợ tìm kiếm theo cả mã và tên, hiển thị label và error tích hợp sẵn.

Import

import { SingleCombobox } from "@/design-system/components/ui/single-combobox";
import type { ComboboxBaseOption } from "@/design-system/components/ui/single-combobox";

ComboboxBaseOption

Kiểu dữ liệu option bắt buộc. Mọi danh sách truyền vào đều phải có đủ 3 trường này.

type ComboboxBaseOption = {
  id: string | number;
  code: string;
  name: string;
};

Props

Component là generic — TypeScript tự infer kiểu option từ mảng options được truyền vào.

Prop	Type	Default
options	ComboboxBaseOption[]	--
value	string \| number	--
onChange	(value, option) => void	--
placeholder	string	'Chọn...'
label	string \| ReactNode	--
required	boolean	false
disabled	boolean	false
error	string	--
showMenuCode	boolean	true
showSelectedCode	boolean	false
searchPlaceholder	string	'Tìm kiếm...'
emptyMessage	string	'Không tìm thấy kết quả'
size	'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'	'md'
className	string	--

Usages

Phòng ban

Chọn phòng ban...

<SingleCombobox
  label="Phòng ban"
  options={departments}
  value={value}
  onChange={(v) => setValue(v)}
  placeholder="Chọn phòng ban..."
  showMenuCode    {/* hiện "IT - Công nghệ thông tin" trong dropdown */}
  showSelectedCode {/* hiện "IT - Công nghệ thông tin" sau khi chọn */}
/>

composed

MultipleCombobox

Combobox chọn nhiều giá trị, hiển thị các lựa chọn dưới dạng chip. Hỗ trợ tìm kiếm theo cả mã và tên, xoá từng chip hoặc xoá toàn bộ.

Import

import { MultipleCombobox } from "@/design-system/components/ui/multiple-combobox";

Props

Props giống SingleCombobox, khác ở kiểu của value và onChange.

Prop	Type	Default
options	ComboboxBaseOption[]	--
value	(string \| number)[]	--
onChange	(values, options) => void	--
placeholder	string	'Chọn...'
label	string \| ReactNode	--
required	boolean	false
disabled	boolean	false
error	string	--
showMenuCode	boolean	true
showSelectedCode	boolean	false
searchPlaceholder	string	'Tìm kiếm...'
emptyMessage	string	'Không tìm thấy kết quả'
requireApply	boolean	true
cancelText	string	'Hủy'
applyText	string	'Áp dụng'
limitTags	number	--
size	'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'	'md'
className	string	--

Usages

Phòng ban

Chọn phòng ban...

<MultipleCombobox
  label="Phòng ban"
  options={departments}
  value={values}
  onChange={(v) => setValues(v)}
  placeholder="Chọn phòng ban..."
  showMenuCode     {/* hiện "IT - Công nghệ thông tin" trong dropdown */}
  showSelectedCode {/* hiện "IT - Công nghệ thông tin" trong chip */}
/>