rhf

RHF Single Combobox

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

1. Import

Import RHFSingleCombobox component từ design system.

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

2. Props

RHFSingleCombobox 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ả
callback	(newValue: string \| number \| undefined, option: TOption \| undefined) => void	--
wrapperClassName	string	--
labelClassName	string	--
descriptionClassName	string	--
errorClassName	string	--

3. Usages

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

Phòng ban

Chọn phòng ban

import { RHFSingleCombobox } 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: {
      department: undefined,
    },
  });

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