{"name":"rhf-multi-select-field","title":"RHF Multi Select Field","description":"Multi select field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-multi-select-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/multi-select"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/multi-select-field.tsx","target":"components/ui/rhf-inputs/multi-select-field.tsx","type":"registry:ui","content":"import { FieldValues } from \"react-hook-form\";\nimport { MultiSelect, OptionType } from \"../multi-select\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype FieldSelectProps<T extends FieldValues> = {\n  placeholder?: string;\n  options: OptionType[];\n  grouped?: boolean;\n  disabled?: boolean;\n  showClear?: boolean;\n  onChange?: (values: string[]) => void;\n} & Omit<BaseControllerProps<T>, \"children\">;\n\nexport function MultiSelectField<T extends FieldValues>({\n  control,\n  name,\n  label,\n  description,\n  disableFieldError = false,\n  required,\n  options,\n  grouped,\n  placeholder,\n  disabled,\n  showClear,\n  onChange,\n}: FieldSelectProps<T>) {\n  return (\n    <BaseController\n      control={control}\n      name={name}\n      label={label}\n      description={description}\n      disableFieldError={disableFieldError}\n      required={required}\n    >\n      {({ field, fieldState, ariaDescribedBy }) => (\n        <MultiSelect\n          options={options}\n          selected={field.value || []}\n          onChange={(values) => {\n            field.onChange(values);\n            onChange?.(values);\n          }}\n          placeholder={placeholder}\n          invalid={!!fieldState.error}\n          grouped={grouped}\n          disabled={disabled}\n          showClear={showClear}\n          aria-describedby={ariaDescribedBy}\n        />\n      )}\n    </BaseController>\n  );\n}\n"}]}