From 34b7ee3b5fe61da756073e81e1d0687ae947333c Mon Sep 17 00:00:00 2001
From: Benedikt Franke <benedikt.franke@mll.com>
Date: Tue, 29 Jul 2025 14:39:31 +0200
Subject: [PATCH 01/12] feat: improve Select option types

---
 src/Fields/SelectField.tsx |  8 ++++----
 src/Select/index.tsx       | 26 ++++++++++----------------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/Fields/SelectField.tsx b/src/Fields/SelectField.tsx
index c4c10ae7..8f8c3c03 100644
--- a/src/Fields/SelectField.tsx
+++ b/src/Fields/SelectField.tsx
@@ -1,4 +1,4 @@
-import { BaseOptionType, DefaultOptionType } from 'antd/lib/select';
+import { DefaultOptionType } from 'antd/lib/select';
 import React from 'react';
 import {
   useController,
@@ -9,7 +9,7 @@ import {
   UnpackNestedValue,
 } from 'react-hook-form';
 
-import { Select, SelectProps } from '../Select';
+import { GroupedOptionType, Select, SelectProps } from '../Select';
 
 import { useFieldContext } from './FieldProvider';
 import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
@@ -17,7 +17,7 @@ import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
 type SelectFieldProps<
   TFieldValues extends FieldValues,
   TName extends FieldPath<TFieldValues>,
-  TOption extends BaseOptionType | DefaultOptionType,
+  TOption extends DefaultOptionType | GroupedOptionType,
 > = UseControllerProps<TFieldValues, TName> &
   Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & {
     component?: SelectProps<
@@ -29,7 +29,7 @@ type SelectFieldProps<
 export function SelectField<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-  TOption extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+  TOption extends DefaultOptionType | GroupedOptionType = DefaultOptionType,
 >({
   formItem,
   component,
diff --git a/src/Select/index.tsx b/src/Select/index.tsx
index 2e21d9a5..707144fe 100644
--- a/src/Select/index.tsx
+++ b/src/Select/index.tsx
@@ -1,5 +1,5 @@
 import { Select as AntdSelect, SelectProps as AntdSelectProps } from 'antd';
-import { BaseOptionType, DefaultOptionType } from 'antd/lib/select';
+import { DefaultOptionType } from 'antd/lib/select';
 import { BaseSelectRef } from 'rc-select';
 import React, {
   ForwardedRef,
@@ -12,17 +12,17 @@ import styled from 'styled-components';
 
 import { fontSizeFromTheme } from '../styled-utils';
 
+/** As described in https://4x.ant.design/components/select/#components-select-demo-optgroup. */
 export type GroupedOptionType = {
   label: string;
-  options: BaseOptionType | DefaultOptionType;
+  options: DefaultOptionType;
 };
 
+export type { DefaultOptionType } from 'antd/lib/select';
+
 export type SelectProps<
   ValueType = unknown,
-  OptionType extends
-    | BaseOptionType
-    | DefaultOptionType
-    | GroupedOptionType = DefaultOptionType,
+  OptionType extends DefaultOptionType | GroupedOptionType = DefaultOptionType,
 > = AntdSelectProps<ValueType, OptionType> & RefAttributes<BaseSelectRef>;
 
 const StyledSelect = styled(AntdSelect)`
@@ -52,8 +52,8 @@ const StyledDropdown = styled.div`
 `;
 
 function SelectInner<
-  ValueType = unknown,
-  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+  ValueType,
+  OptionType extends DefaultOptionType | GroupedOptionType,
 >(
   { children, dropdownRender, ...props }: SelectProps<ValueType, OptionType>,
   ref: ForwardedRef<BaseSelectRef>,
@@ -78,15 +78,9 @@ function SelectInner<
   );
 }
 
-export const Select = forwardRef<
-  BaseSelectRef,
-  SelectProps<unknown, BaseOptionType | DefaultOptionType | GroupedOptionType>
->(SelectInner) as unknown as (<
+export const Select = forwardRef(SelectInner) as unknown as (<
   TValue = unknown,
-  TOption extends
-    | BaseOptionType
-    | DefaultOptionType
-    | GroupedOptionType = DefaultOptionType,
+  TOption extends DefaultOptionType | GroupedOptionType = DefaultOptionType,
 >(
   props: SelectProps<TValue, TOption> & RefAttributes<BaseSelectRef>,
 ) => ReactElement) & {

From d2e719f62284934184126a08ef2b006bba554010 Mon Sep 17 00:00:00 2001
From: Benedikt Franke <benedikt.franke@mll.com>
Date: Tue, 29 Jul 2025 14:50:46 +0200
Subject: [PATCH 02/12] feat: export FilterOptionFunction

---
 src/Select/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Select/index.tsx b/src/Select/index.tsx
index 707144fe..18f9cde8 100644
--- a/src/Select/index.tsx
+++ b/src/Select/index.tsx
@@ -20,6 +20,8 @@ export type GroupedOptionType = {
 
 export type { DefaultOptionType } from 'antd/lib/select';
 
+export type { FilterFunc as FilterOptionFunction } from 'rc-select/es/Select';
+
 export type SelectProps<
   ValueType = unknown,
   OptionType extends DefaultOptionType | GroupedOptionType = DefaultOptionType,

From 7d508b77cfc30f0a3fe8463e76a6a9068079819d Mon Sep 17 00:00:00 2001
From: Benedikt Franke <benedikt.franke@mll.com>
Date: Tue, 29 Jul 2025 14:53:49 +0200
Subject: [PATCH 03/12] fix: options is an Array

---
 src/Select/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Select/index.tsx b/src/Select/index.tsx
index 18f9cde8..fb553185 100644
--- a/src/Select/index.tsx
+++ b/src/Select/index.tsx
@@ -15,7 +15,7 @@ import { fontSizeFromTheme } from '../styled-utils';
 /** As described in https://4x.ant.design/components/select/#components-select-demo-optgroup. */
 export type GroupedOptionType = {
   label: string;
-  options: DefaultOptionType;
+  options: Array<DefaultOptionType>;
 };
 
 export type { DefaultOptionType } from 'antd/lib/select';

From 9189668484d025309e6040f12ec7e9177ce67174 Mon Sep 17 00:00:00 2001
From: Benedikt Franke <benedikt.franke@mll.com>
Date: Tue, 29 Jul 2025 15:36:11 +0200
Subject: [PATCH 04/12] fix: OptionType and GroupedOptionType with generics

---
 src/Fields/FieldWrapper.tsx  | 17 ++++++++---------
 src/Fields/SelectField.tsx   | 34 ++++++++++++++++++---------------
 src/Fields/index.stories.tsx |  2 +-
 src/Select/index.tsx         | 37 +++++++++++++++++++++---------------
 4 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/src/Fields/FieldWrapper.tsx b/src/Fields/FieldWrapper.tsx
index f726a326..cefa8de1 100644
--- a/src/Fields/FieldWrapper.tsx
+++ b/src/Fields/FieldWrapper.tsx
@@ -5,7 +5,6 @@ import {
   UseControllerProps,
   FieldPathValue,
   FieldPath,
-  UnpackNestedValue,
 } from 'react-hook-form';
 
 import { Form, FormItemProps } from '../Form';
@@ -14,20 +13,20 @@ import { useFieldContext } from './FieldProvider';
 
 export type FieldWrapperProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>,
+  TFieldPath extends FieldPath<TFieldValues>,
 > = {
   children: ReactNode;
-  controller: UseControllerProps<TFieldValues, TName>;
-  formItem?: FormItemProps<
-    UnpackNestedValue<FieldPathValue<TFieldValues, TName>>
-  >;
+  controller: UseControllerProps<TFieldValues, TFieldPath>;
+  formItem?: FormItemProps<FieldPathValue<TFieldValues, TFieldPath>>;
 };
 
 export function FieldWrapper<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>,
->(props: FieldWrapperProps<TFieldValues, TName>) {
-  const { fieldState } = useController<TFieldValues, TName>(props.controller);
+  TFieldPath extends FieldPath<TFieldValues>,
+>(props: FieldWrapperProps<TFieldValues, TFieldPath>) {
+  const { fieldState } = useController<TFieldValues, TFieldPath>(
+    props.controller,
+  );
 
   const { formItemProps } = useFieldContext();
 
diff --git a/src/Fields/SelectField.tsx b/src/Fields/SelectField.tsx
index 8f8c3c03..df9206cc 100644
--- a/src/Fields/SelectField.tsx
+++ b/src/Fields/SelectField.tsx
@@ -1,4 +1,3 @@
-import { DefaultOptionType } from 'antd/lib/select';
 import React from 'react';
 import {
   useController,
@@ -6,38 +5,43 @@ import {
   FieldPathValue,
   FieldValues,
   UseControllerProps,
-  UnpackNestedValue,
 } from 'react-hook-form';
 
-import { GroupedOptionType, Select, SelectProps } from '../Select';
+import { OptionType, GroupedOptionType, Select, SelectProps } from '../Select';
 
 import { useFieldContext } from './FieldProvider';
 import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
 
 type SelectFieldProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>,
-  TOption extends DefaultOptionType | GroupedOptionType,
-> = UseControllerProps<TFieldValues, TName> &
-  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & {
-    component?: SelectProps<
-      UnpackNestedValue<FieldPathValue<TFieldValues, TName>>,
-      TOption
-    >;
+  TFieldPath extends FieldPath<TFieldValues>,
+  TFieldPathValue extends FieldPathValue<TFieldValues, TFieldPath>,
+  TOption extends
+    | OptionType<TFieldPathValue>
+    | GroupedOptionType<TFieldPathValue>,
+> = UseControllerProps<TFieldValues, TFieldPath> &
+  Pick<FieldWrapperProps<TFieldValues, TFieldPath>, 'formItem'> & {
+    component?: SelectProps<TFieldPathValue, TOption>;
   };
 
 export function SelectField<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-  TOption extends DefaultOptionType | GroupedOptionType = DefaultOptionType,
+  TFieldPath extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TFieldPathValue extends FieldPathValue<
+    TFieldValues,
+    TFieldPath
+  > = FieldPathValue<TFieldValues, TFieldPath>,
+  TOption extends
+    | OptionType<TFieldPathValue>
+    | GroupedOptionType<TFieldPathValue> = OptionType<TFieldPathValue>,
 >({
   formItem,
   component,
   ...controller
-}: SelectFieldProps<TFieldValues, TName, TOption>) {
+}: SelectFieldProps<TFieldValues, TFieldPath, TFieldPathValue, TOption>) {
   const {
     field: { onChange, ...fieldProps },
-  } = useController<TFieldValues, TName>(controller);
+  } = useController<TFieldValues, TFieldPath>(controller);
 
   const { disabled } = useFieldContext();
 
diff --git a/src/Fields/index.stories.tsx b/src/Fields/index.stories.tsx
index 5e44de38..f5885d52 100644
--- a/src/Fields/index.stories.tsx
+++ b/src/Fields/index.stories.tsx
@@ -199,7 +199,7 @@ function AllFields() {
           label: 'Select',
         }}
         component={{
-          options: ['a', 'b'].map(toFormInputOption),
+          options: (['a', 'b'] as const).map(toFormInputOption),
         }}
       />
       <SwitchField
diff --git a/src/Select/index.tsx b/src/Select/index.tsx
index fb553185..5481a5dc 100644
--- a/src/Select/index.tsx
+++ b/src/Select/index.tsx
@@ -1,10 +1,10 @@
 import { Select as AntdSelect, SelectProps as AntdSelectProps } from 'antd';
-import { DefaultOptionType } from 'antd/lib/select';
 import { BaseSelectRef } from 'rc-select';
 import React, {
   ForwardedRef,
   forwardRef,
   ReactElement,
+  ReactNode,
   RefAttributes,
   useCallback,
 } from 'react';
@@ -12,20 +12,25 @@ import styled from 'styled-components';
 
 import { fontSizeFromTheme } from '../styled-utils';
 
-/** As described in https://4x.ant.design/components/select/#components-select-demo-optgroup. */
-export type GroupedOptionType = {
-  label: string;
-  options: Array<DefaultOptionType>;
+export type OptionType<TValue = unknown> = {
+  label: ReactNode;
+  value: TValue;
 };
 
-export type { DefaultOptionType } from 'antd/lib/select';
+/** As described in https://4x.ant.design/components/select/#components-select-demo-optgroup. */
+export type GroupedOptionType<TValue = unknown> = {
+  label: ReactNode;
+  options: Array<OptionType<TValue>>;
+};
 
 export type { FilterFunc as FilterOptionFunction } from 'rc-select/es/Select';
 
 export type SelectProps<
-  ValueType = unknown,
-  OptionType extends DefaultOptionType | GroupedOptionType = DefaultOptionType,
-> = AntdSelectProps<ValueType, OptionType> & RefAttributes<BaseSelectRef>;
+  TValue = unknown,
+  TOption extends
+    | OptionType<TValue>
+    | GroupedOptionType<TValue> = OptionType<TValue>,
+> = AntdSelectProps<TValue, TOption> & RefAttributes<BaseSelectRef>;
 
 const StyledSelect = styled(AntdSelect)`
   &,
@@ -54,10 +59,10 @@ const StyledDropdown = styled.div`
 `;
 
 function SelectInner<
-  ValueType,
-  OptionType extends DefaultOptionType | GroupedOptionType,
+  TValue,
+  TOptionType extends OptionType<TValue> | GroupedOptionType<TValue>,
 >(
-  { children, dropdownRender, ...props }: SelectProps<ValueType, OptionType>,
+  { children, dropdownRender, ...props }: SelectProps<TValue, TOptionType>,
   ref: ForwardedRef<BaseSelectRef>,
 ) {
   const styledDropdownRender = useCallback(
@@ -70,7 +75,7 @@ function SelectInner<
   );
 
   return (
-    <StyledSelect<ValueType, OptionType>
+    <StyledSelect<TValue, TOptionType>
       ref={ref}
       dropdownRender={styledDropdownRender}
       {...props}
@@ -82,9 +87,11 @@ function SelectInner<
 
 export const Select = forwardRef(SelectInner) as unknown as (<
   TValue = unknown,
-  TOption extends DefaultOptionType | GroupedOptionType = DefaultOptionType,
+  TOptionType extends
+    | OptionType<TValue>
+    | GroupedOptionType<TValue> = OptionType<TValue>,
 >(
-  props: SelectProps<TValue, TOption> & RefAttributes<BaseSelectRef>,
+  props: SelectProps<TValue, TOptionType> & RefAttributes<BaseSelectRef>,
 ) => ReactElement) & {
   Option: typeof AntdSelect.Option;
   OptGroup: typeof AntdSelect.OptGroup;

From 37dd1424c683b3636150b31ae7ae37bf2090b203 Mon Sep 17 00:00:00 2001
From: Benedikt Franke <benedikt.franke@mll.com>
Date: Wed, 30 Jul 2025 09:42:37 +0200
Subject: [PATCH 05/12] fix: allow disabled

---
 src/Fields/SelectField.tsx   | 10 +++-------
 src/Select/index.stories.tsx | 30 +++++++++++++++++++++++++++++-
 src/Select/index.tsx         | 23 +++++++++++------------
 3 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/src/Fields/SelectField.tsx b/src/Fields/SelectField.tsx
index df9206cc..1f6466c8 100644
--- a/src/Fields/SelectField.tsx
+++ b/src/Fields/SelectField.tsx
@@ -7,7 +7,7 @@ import {
   UseControllerProps,
 } from 'react-hook-form';
 
-import { OptionType, GroupedOptionType, Select, SelectProps } from '../Select';
+import { Select, SelectProps, OptionType } from '../Select';
 
 import { useFieldContext } from './FieldProvider';
 import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
@@ -16,9 +16,7 @@ type SelectFieldProps<
   TFieldValues extends FieldValues,
   TFieldPath extends FieldPath<TFieldValues>,
   TFieldPathValue extends FieldPathValue<TFieldValues, TFieldPath>,
-  TOption extends
-    | OptionType<TFieldPathValue>
-    | GroupedOptionType<TFieldPathValue>,
+  TOption extends OptionType<TFieldPathValue>,
 > = UseControllerProps<TFieldValues, TFieldPath> &
   Pick<FieldWrapperProps<TFieldValues, TFieldPath>, 'formItem'> & {
     component?: SelectProps<TFieldPathValue, TOption>;
@@ -31,9 +29,7 @@ export function SelectField<
     TFieldValues,
     TFieldPath
   > = FieldPathValue<TFieldValues, TFieldPath>,
-  TOption extends
-    | OptionType<TFieldPathValue>
-    | GroupedOptionType<TFieldPathValue> = OptionType<TFieldPathValue>,
+  TOption extends OptionType<TFieldPathValue> = OptionType<TFieldPathValue>,
 >({
   formItem,
   component,
diff --git a/src/Select/index.stories.tsx b/src/Select/index.stories.tsx
index 6396e525..669c2bd8 100644
--- a/src/Select/index.stories.tsx
+++ b/src/Select/index.stories.tsx
@@ -31,7 +31,7 @@ export const Multiple: Story<SelectProps> = function Multiple(args) {
   return <Default mode="multiple" {...args} />;
 };
 
-export const Group: Story<SelectProps> = function Group(args) {
+export const OptGroup: Story<SelectProps> = function OptGroup(args) {
   return (
     <Select defaultValue="lucy" style={{ width: 120 }} {...args}>
       <Select.OptGroup label="Guys">
@@ -43,10 +43,38 @@ export const Group: Story<SelectProps> = function Group(args) {
       <Select.OptGroup label="Gals">
         <Select.Option value="lucy">Lucy</Select.Option>
       </Select.OptGroup>
+      <Select.OptGroup label="Other" disabled>
+        <Select.Option value="juice">Juice</Select.Option>
+      </Select.OptGroup>
     </Select>
   );
 };
 
+export const OptionsGroup: Story<SelectProps> = function OptionsGroups(args) {
+  return (
+    <Select
+      defaultValue="lucy"
+      style={{ width: 120 }}
+      options={[
+        {
+          label: 'Guys',
+          options: [
+            { label: 'Jack', value: 'jack' },
+            { label: 'Henry', value: 'henry', disabled: true },
+          ],
+        },
+        { label: 'Gals', options: [{ label: 'Lucy', value: 'lucy' }] },
+        {
+          label: 'Other',
+          disabled: true,
+          options: [{ label: 'Juice', value: 'juice' }],
+        },
+      ]}
+      {...args}
+    />
+  );
+};
+
 export const CustomDropdown: Story<SelectProps> = function CustomDropdown(
   args,
 ) {
diff --git a/src/Select/index.tsx b/src/Select/index.tsx
index 5481a5dc..6592d471 100644
--- a/src/Select/index.tsx
+++ b/src/Select/index.tsx
@@ -12,24 +12,28 @@ import styled from 'styled-components';
 
 import { fontSizeFromTheme } from '../styled-utils';
 
-export type OptionType<TValue = unknown> = {
+export type OptionType<TValue = unknown> =
+  | ValueOptionType<TValue>
+  | GroupedOptionType<TValue>;
+
+export type ValueOptionType<TValue = unknown> = {
   label: ReactNode;
   value: TValue;
+  disabled?: boolean;
 };
 
 /** As described in https://4x.ant.design/components/select/#components-select-demo-optgroup. */
 export type GroupedOptionType<TValue = unknown> = {
   label: ReactNode;
-  options: Array<OptionType<TValue>>;
+  options: Array<ValueOptionType<TValue>>;
+  disabled?: boolean;
 };
 
 export type { FilterFunc as FilterOptionFunction } from 'rc-select/es/Select';
 
 export type SelectProps<
   TValue = unknown,
-  TOption extends
-    | OptionType<TValue>
-    | GroupedOptionType<TValue> = OptionType<TValue>,
+  TOption extends OptionType<TValue> = OptionType<TValue>,
 > = AntdSelectProps<TValue, TOption> & RefAttributes<BaseSelectRef>;
 
 const StyledSelect = styled(AntdSelect)`
@@ -58,10 +62,7 @@ const StyledDropdown = styled.div`
   }
 `;
 
-function SelectInner<
-  TValue,
-  TOptionType extends OptionType<TValue> | GroupedOptionType<TValue>,
->(
+function SelectInner<TValue, TOptionType extends OptionType<TValue>>(
   { children, dropdownRender, ...props }: SelectProps<TValue, TOptionType>,
   ref: ForwardedRef<BaseSelectRef>,
 ) {
@@ -87,9 +88,7 @@ function SelectInner<
 
 export const Select = forwardRef(SelectInner) as unknown as (<
   TValue = unknown,
-  TOptionType extends
-    | OptionType<TValue>
-    | GroupedOptionType<TValue> = OptionType<TValue>,
+  TOptionType extends OptionType<TValue> = OptionType<TValue>,
 >(
   props: SelectProps<TValue, TOptionType> & RefAttributes<BaseSelectRef>,
 ) => ReactElement) & {

From 41cb04ace84cd628fd62867a81da04fc2f386146 Mon Sep 17 00:00:00 2001
From: Benedikt Franke <benedikt.franke@mll.com>
Date: Wed, 30 Jul 2025 09:56:25 +0200
Subject: [PATCH 06/12] fix: generic type FilterOptionFunction

---
 src/Select/index.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/Select/index.tsx b/src/Select/index.tsx
index 6592d471..ed316d0f 100644
--- a/src/Select/index.tsx
+++ b/src/Select/index.tsx
@@ -1,5 +1,7 @@
+import { Modify } from '@mll-lab/js-utils';
 import { Select as AntdSelect, SelectProps as AntdSelectProps } from 'antd';
 import { BaseSelectRef } from 'rc-select';
+import type { FilterFunc as AntdFilterFunc } from 'rc-select/es/Select';
 import React, {
   ForwardedRef,
   forwardRef,
@@ -29,12 +31,21 @@ export type GroupedOptionType<TValue = unknown> = {
   disabled?: boolean;
 };
 
-export type { FilterFunc as FilterOptionFunction } from 'rc-select/es/Select';
+export type FilterOptionFunction<
+  TValue = unknown,
+  TOption extends OptionType<TValue> = OptionType<TValue>,
+> = AntdFilterFunc<TOption>;
 
 export type SelectProps<
   TValue = unknown,
   TOption extends OptionType<TValue> = OptionType<TValue>,
-> = AntdSelectProps<TValue, TOption> & RefAttributes<BaseSelectRef>;
+> = Modify<
+  AntdSelectProps<TValue, TOption>,
+  {
+    filterOption?: boolean | FilterOptionFunction<TValue, TOption>;
+  }
+> &
+  RefAttributes<BaseSelectRef>;
 
 const StyledSelect = styled(AntdSelect)`
   &,

From ac1f9096329211a6915ba66361e06dab1ecba3bf Mon Sep 17 00:00:00 2001
From: Benedikt Franke <benedikt.franke@mll.com>
Date: Wed, 30 Jul 2025 10:15:23 +0200
Subject: [PATCH 07/12] fix: UnpackNestedValue

---
 src/Fields/SelectField.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Fields/SelectField.tsx b/src/Fields/SelectField.tsx
index 1f6466c8..34f1e1d8 100644
--- a/src/Fields/SelectField.tsx
+++ b/src/Fields/SelectField.tsx
@@ -5,6 +5,7 @@ import {
   FieldPathValue,
   FieldValues,
   UseControllerProps,
+  UnpackNestedValue,
 } from 'react-hook-form';
 
 import { Select, SelectProps, OptionType } from '../Select';
@@ -16,10 +17,10 @@ type SelectFieldProps<
   TFieldValues extends FieldValues,
   TFieldPath extends FieldPath<TFieldValues>,
   TFieldPathValue extends FieldPathValue<TFieldValues, TFieldPath>,
-  TOption extends OptionType<TFieldPathValue>,
+  TOption extends OptionType<UnpackNestedValue<TFieldPathValue>>,
 > = UseControllerProps<TFieldValues, TFieldPath> &
   Pick<FieldWrapperProps<TFieldValues, TFieldPath>, 'formItem'> & {
-    component?: SelectProps<TFieldPathValue, TOption>;
+    component?: SelectProps<UnpackNestedValue<TFieldPathValue>, TOption>;
   };
 
 export function SelectField<

From 6972bfc39baa42e566ecc91335ce85a6bf4fddfa Mon Sep 17 00:00:00 2001
From: Benedikt Franke <benedikt.franke@mll.com>
Date: Wed, 30 Jul 2025 10:20:06 +0200
Subject: [PATCH 08/12] fix: UnpackNestedValue

---
 src/Fields/SelectField.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/Fields/SelectField.tsx b/src/Fields/SelectField.tsx
index 34f1e1d8..f5a5339e 100644
--- a/src/Fields/SelectField.tsx
+++ b/src/Fields/SelectField.tsx
@@ -16,20 +16,21 @@ import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
 type SelectFieldProps<
   TFieldValues extends FieldValues,
   TFieldPath extends FieldPath<TFieldValues>,
-  TFieldPathValue extends FieldPathValue<TFieldValues, TFieldPath>,
-  TOption extends OptionType<UnpackNestedValue<TFieldPathValue>>,
+  TFieldPathValue extends UnpackNestedValue<
+    FieldPathValue<TFieldValues, TFieldPath>
+  >,
+  TOption extends OptionType<TFieldPathValue>,
 > = UseControllerProps<TFieldValues, TFieldPath> &
   Pick<FieldWrapperProps<TFieldValues, TFieldPath>, 'formItem'> & {
-    component?: SelectProps<UnpackNestedValue<TFieldPathValue>, TOption>;
+    component?: SelectProps<TFieldPathValue, TOption>;
   };
 
 export function SelectField<
   TFieldValues extends FieldValues = FieldValues,
   TFieldPath extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-  TFieldPathValue extends FieldPathValue<
-    TFieldValues,
-    TFieldPath
-  > = FieldPathValue<TFieldValues, TFieldPath>,
+  TFieldPathValue extends UnpackNestedValue<
+    FieldPathValue<TFieldValues, TFieldPath>
+  > = UnpackNestedValue<FieldPathValue<TFieldValues, TFieldPath>>,
   TOption extends OptionType<TFieldPathValue> = OptionType<TFieldPathValue>,
 >({
   formItem,

From 2bbd6e5a84176dc40401c0e9416a2f72d5da887c Mon Sep 17 00:00:00 2001
From: Benedikt Franke <benedikt.franke@mll.com>
Date: Wed, 30 Jul 2025 10:25:49 +0200
Subject: [PATCH 09/12] fix: UnpackArray

---
 src/Fields/SelectField.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/Fields/SelectField.tsx b/src/Fields/SelectField.tsx
index f5a5339e..2c026b99 100644
--- a/src/Fields/SelectField.tsx
+++ b/src/Fields/SelectField.tsx
@@ -5,7 +5,6 @@ import {
   FieldPathValue,
   FieldValues,
   UseControllerProps,
-  UnpackNestedValue,
 } from 'react-hook-form';
 
 import { Select, SelectProps, OptionType } from '../Select';
@@ -13,12 +12,12 @@ import { Select, SelectProps, OptionType } from '../Select';
 import { useFieldContext } from './FieldProvider';
 import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
 
+type UnpackArray<T> = T extends Array<infer U> ? U : T;
+
 type SelectFieldProps<
   TFieldValues extends FieldValues,
   TFieldPath extends FieldPath<TFieldValues>,
-  TFieldPathValue extends UnpackNestedValue<
-    FieldPathValue<TFieldValues, TFieldPath>
-  >,
+  TFieldPathValue extends UnpackArray<FieldPathValue<TFieldValues, TFieldPath>>,
   TOption extends OptionType<TFieldPathValue>,
 > = UseControllerProps<TFieldValues, TFieldPath> &
   Pick<FieldWrapperProps<TFieldValues, TFieldPath>, 'formItem'> & {
@@ -28,9 +27,9 @@ type SelectFieldProps<
 export function SelectField<
   TFieldValues extends FieldValues = FieldValues,
   TFieldPath extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-  TFieldPathValue extends UnpackNestedValue<
+  TFieldPathValue extends UnpackArray<
     FieldPathValue<TFieldValues, TFieldPath>
-  > = UnpackNestedValue<FieldPathValue<TFieldValues, TFieldPath>>,
+  > = UnpackArray<FieldPathValue<TFieldValues, TFieldPath>>,
   TOption extends OptionType<TFieldPathValue> = OptionType<TFieldPathValue>,
 >({
   formItem,

From c5c79be8c771adbeabad06fda4916dfd1d68349f Mon Sep 17 00:00:00 2001
From: Benedikt Franke <benedikt.franke@mll.com>
Date: Wed, 30 Jul 2025 10:28:07 +0200
Subject: [PATCH 10/12] add story

---
 src/Fields/index.stories.tsx | 43 +++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/Fields/index.stories.tsx b/src/Fields/index.stories.tsx
index f5885d52..3043b8db 100644
--- a/src/Fields/index.stories.tsx
+++ b/src/Fields/index.stories.tsx
@@ -31,11 +31,12 @@ export default {
 type FormType = {
   autocomplete: string;
   checkbox: boolean;
-  checkboxGroup: Array<string>;
+  checkbox_group: Array<string>;
   input: string;
   input_number: number;
   radio_group: 1 | 2;
   select: 'a' | 'b';
+  select_multiple: Array<string>;
   switch: boolean;
   text_area: string;
   date_range: string;
@@ -117,12 +118,13 @@ export const NestedProviders: Story<FieldProviderProps> =
   };
 
 function AllFields() {
-  const formMethods = useFormContext<FormType>();
+  const { control } = useFormContext<FormType>();
+
   return (
     <Form>
       <AutocompleteField
         name="autocomplete"
-        control={formMethods.control}
+        control={control}
         formItem={{ label: 'Autocomplete' }}
         component={{
           options: ['foo', 'bar'].map(toFormInputOption),
@@ -130,7 +132,7 @@ function AllFields() {
       />
       <CheckboxField
         name="checkbox"
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'Checkbox',
         }}
@@ -138,22 +140,22 @@ function AllFields() {
         Checkbox children
       </CheckboxField>
       <CheckboxGroupField
-        name="checkboxGroup"
-        control={formMethods.control}
+        name="checkbox_group"
+        control={control}
         formItem={{ label: 'CheckboxGroup' }}
         component={{ options: ['a', 'b'].map(toFormInputOption) }}
       />
       <InputField
         name="input"
         rules={{ required: 'You really need this', maxLength: 3 }}
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'Input required',
         }}
       />
       <InputField
         name="input"
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'Input styled',
         }}
@@ -166,14 +168,14 @@ function AllFields() {
       <InputNumberField
         name="input_number"
         rules={{ required: 'Absolutely necessary' }}
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'InputNumber required',
         }}
       />
       <InputNumberField
         name="input_number"
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'InputNumber styled',
         }}
@@ -184,7 +186,7 @@ function AllFields() {
       />
       <RadioGroupField
         name="radio_group"
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'RadioGroup',
         }}
@@ -194,7 +196,7 @@ function AllFields() {
       />
       <SelectField
         name="select"
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'Select',
         }}
@@ -202,22 +204,33 @@ function AllFields() {
           options: (['a', 'b'] as const).map(toFormInputOption),
         }}
       />
+      <SelectField
+        name="select_multiple"
+        control={control}
+        formItem={{
+          label: 'Select Multiple',
+        }}
+        component={{
+          mode: 'tags',
+          options: ['x', 'y', 'z'].map(toFormInputOption),
+        }}
+      />
       <SwitchField
         name="switch"
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'Switch',
         }}
       />
       <DatePickerField
         name="date_picker"
-        control={formMethods.control}
+        control={control}
         formItem={{ label: 'DatePicker' }}
         component={{ placeholder: 'Datum wählen' }}
       />
       <DateRangePickerField
         name="date_range"
-        control={formMethods.control}
+        control={control}
         formItem={{ label: 'DateRangePicker' }}
       />
       <TextAreaStory />

From 4be6730c6d450cc5f0506cb0b9fc23cddc42274b Mon Sep 17 00:00:00 2001
From: Benedikt Franke <benedikt.franke@mll.com>
Date: Wed, 30 Jul 2025 11:00:30 +0200
Subject: [PATCH 11/12] fix: simplify SelectProps

---
 src/Select/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Select/index.tsx b/src/Select/index.tsx
index ed316d0f..c284c569 100644
--- a/src/Select/index.tsx
+++ b/src/Select/index.tsx
@@ -101,7 +101,7 @@ export const Select = forwardRef(SelectInner) as unknown as (<
   TValue = unknown,
   TOptionType extends OptionType<TValue> = OptionType<TValue>,
 >(
-  props: SelectProps<TValue, TOptionType> & RefAttributes<BaseSelectRef>,
+  props: SelectProps<TValue, TOptionType>,
 ) => ReactElement) & {
   Option: typeof AntdSelect.Option;
   OptGroup: typeof AntdSelect.OptGroup;

From b64e82fed7673b33c9228d6698f71eb0da65ca12 Mon Sep 17 00:00:00 2001
From: Benedikt Franke <benedikt.franke@mll.com>
Date: Wed, 30 Jul 2025 11:39:49 +0200
Subject: [PATCH 12/12] fix: generic label

---
 src/Fields/SelectField.tsx |  7 ++++---
 src/Form/formInput.ts      |  5 ++++-
 src/Select/index.tsx       | 37 +++++++++++++++++++++----------------
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/Fields/SelectField.tsx b/src/Fields/SelectField.tsx
index 2c026b99..511f7446 100644
--- a/src/Fields/SelectField.tsx
+++ b/src/Fields/SelectField.tsx
@@ -7,7 +7,7 @@ import {
   UseControllerProps,
 } from 'react-hook-form';
 
-import { Select, SelectProps, OptionType } from '../Select';
+import { Select, SelectProps, MaybeGroupedInputOption } from '../Select';
 
 import { useFieldContext } from './FieldProvider';
 import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
@@ -18,7 +18,7 @@ type SelectFieldProps<
   TFieldValues extends FieldValues,
   TFieldPath extends FieldPath<TFieldValues>,
   TFieldPathValue extends UnpackArray<FieldPathValue<TFieldValues, TFieldPath>>,
-  TOption extends OptionType<TFieldPathValue>,
+  TOption extends MaybeGroupedInputOption<TFieldPathValue>,
 > = UseControllerProps<TFieldValues, TFieldPath> &
   Pick<FieldWrapperProps<TFieldValues, TFieldPath>, 'formItem'> & {
     component?: SelectProps<TFieldPathValue, TOption>;
@@ -30,7 +30,8 @@ export function SelectField<
   TFieldPathValue extends UnpackArray<
     FieldPathValue<TFieldValues, TFieldPath>
   > = UnpackArray<FieldPathValue<TFieldValues, TFieldPath>>,
-  TOption extends OptionType<TFieldPathValue> = OptionType<TFieldPathValue>,
+  TOption extends
+    MaybeGroupedInputOption<TFieldPathValue> = MaybeGroupedInputOption<TFieldPathValue>,
 >({
   formItem,
   component,
diff --git a/src/Form/formInput.ts b/src/Form/formInput.ts
index b9fd94ce..f0810bfc 100644
--- a/src/Form/formInput.ts
+++ b/src/Form/formInput.ts
@@ -1,6 +1,9 @@
 import { ReactNode } from 'react';
 
-export type FormInputOption<TValue, TLabel extends ReactNode> = {
+export type FormInputOption<
+  TValue = unknown,
+  TLabel extends ReactNode = ReactNode,
+> = {
   value: TValue;
   label: TLabel;
   disabled?: boolean;
diff --git a/src/Select/index.tsx b/src/Select/index.tsx
index c284c569..af1e50f2 100644
--- a/src/Select/index.tsx
+++ b/src/Select/index.tsx
@@ -12,33 +12,34 @@ import React, {
 } from 'react';
 import styled from 'styled-components';
 
+import { FormInputOption } from '../Form';
 import { fontSizeFromTheme } from '../styled-utils';
 
-export type OptionType<TValue = unknown> =
-  | ValueOptionType<TValue>
-  | GroupedOptionType<TValue>;
-
-export type ValueOptionType<TValue = unknown> = {
-  label: ReactNode;
-  value: TValue;
-  disabled?: boolean;
-};
+export type MaybeGroupedInputOption<
+  TValue = unknown,
+  TLabel extends ReactNode = ReactNode,
+> = FormInputOption<TValue, TLabel> | GroupedInputOption<TValue, TLabel>;
 
 /** As described in https://4x.ant.design/components/select/#components-select-demo-optgroup. */
-export type GroupedOptionType<TValue = unknown> = {
-  label: ReactNode;
-  options: Array<ValueOptionType<TValue>>;
+export type GroupedInputOption<
+  TValue = unknown,
+  TLabel extends ReactNode = ReactNode,
+> = {
+  label: TLabel;
+  options: Array<FormInputOption<TValue, TLabel>>;
   disabled?: boolean;
 };
 
 export type FilterOptionFunction<
   TValue = unknown,
-  TOption extends OptionType<TValue> = OptionType<TValue>,
+  TOption extends
+    MaybeGroupedInputOption<TValue> = MaybeGroupedInputOption<TValue>,
 > = AntdFilterFunc<TOption>;
 
 export type SelectProps<
   TValue = unknown,
-  TOption extends OptionType<TValue> = OptionType<TValue>,
+  TOption extends
+    MaybeGroupedInputOption<TValue> = MaybeGroupedInputOption<TValue>,
 > = Modify<
   AntdSelectProps<TValue, TOption>,
   {
@@ -73,7 +74,10 @@ const StyledDropdown = styled.div`
   }
 `;
 
-function SelectInner<TValue, TOptionType extends OptionType<TValue>>(
+function SelectInner<
+  TValue,
+  TOptionType extends MaybeGroupedInputOption<TValue>,
+>(
   { children, dropdownRender, ...props }: SelectProps<TValue, TOptionType>,
   ref: ForwardedRef<BaseSelectRef>,
 ) {
@@ -99,7 +103,8 @@ function SelectInner<TValue, TOptionType extends OptionType<TValue>>(
 
 export const Select = forwardRef(SelectInner) as unknown as (<
   TValue = unknown,
-  TOptionType extends OptionType<TValue> = OptionType<TValue>,
+  TOptionType extends
+    MaybeGroupedInputOption<TValue> = MaybeGroupedInputOption<TValue>,
 >(
   props: SelectProps<TValue, TOptionType>,
 ) => ReactElement) & {