rhf

RHF Multiple Combobox

React Hook Form wrapper cho MultipleCombobox với hỗ trợ validation và error handling tích hợp.

1. Import

Import RHFMultipleCombobox component từ design system.

import { RHFMultipleCombobox } from "@/design-system/components/rhf";

2. Props

RHFMultipleCombobox component props.

Prop	Type	Default
control	Control<T>	--
name	Path<T>	--
options	ComboboxBaseOption[]	--
label	string \| React.ReactNode	--
description	string	--
required	boolean	false
disabled	boolean	false
placeholder	string	Chọn...
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	false
cancelText	string	Hủy
applyText	string	Áp dụng
limitTags	number	--
autoResize	boolean	false
showArrowIcon	boolean	true
showClearIcon	boolean	true
onSelectedRender	(selectedId, selectedOption) => React.ReactNode	--
callback	(values: (string \| number)[], options: TOption[]) => void	--
wrapperClassName	string	--
labelClassName	string	--
descriptionClassName	string	--
errorClassName	string	--

3. Usages

Các pattern và cấu hình RHFMultipleCombobox phổ biến.

Phòng ban

Chọn phòng ban

import { RHFMultipleCombobox } from "@/design-system/components/rhf";
import { useForm } from "react-hook-form";
import type { ComboboxBaseOption } from "@/design-system/components/ui/single-combobox";

const departments: ComboboxBaseOption[] = [
  { id: '1', code: 'IT', name: 'Công nghệ thông tin' },
  { id: '2', code: 'FIN', name: 'Tài chính' },
  { id: '3', code: 'HR', name: 'Nhân sự' },
];

export function ExampleCombobox() {
  const { control } = useForm({
    defaultValues: {
      departments: [],
    },
  });

  return (
    <RHFMultipleCombobox
      control={control}
      name="departments"
      options={departments}
      label="Phòng ban"
      placeholder="Chọn phòng ban"
    />
  );
}