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 c4c10ae7..511f7446 100644
--- a/src/Fields/SelectField.tsx
+++ b/src/Fields/SelectField.tsx
@@ -1,4 +1,3 @@
-import { BaseOptionType, DefaultOptionType } from 'antd/lib/select';
 import React from 'react';
 import {
   useController,
@@ -6,38 +5,41 @@ import {
   FieldPathValue,
   FieldValues,
   UseControllerProps,
-  UnpackNestedValue,
 } from 'react-hook-form';
 
-import { Select, SelectProps } from '../Select';
+import { Select, SelectProps, MaybeGroupedInputOption } 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,
-  TName extends FieldPath<TFieldValues>,
-  TOption extends BaseOptionType | DefaultOptionType,
-> = UseControllerProps<TFieldValues, TName> &
-  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & {
-    component?: SelectProps<
-      UnpackNestedValue<FieldPathValue<TFieldValues, TName>>,
-      TOption
-    >;
+  TFieldPath extends FieldPath<TFieldValues>,
+  TFieldPathValue extends UnpackArray<FieldPathValue<TFieldValues, TFieldPath>>,
+  TOption extends MaybeGroupedInputOption<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 BaseOptionType | DefaultOptionType = DefaultOptionType,
+  TFieldPath extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TFieldPathValue extends UnpackArray<
+    FieldPathValue<TFieldValues, TFieldPath>
+  > = UnpackArray<FieldPathValue<TFieldValues, TFieldPath>>,
+  TOption extends
+    MaybeGroupedInputOption<TFieldPathValue> = MaybeGroupedInputOption<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..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,30 +196,41 @@ function AllFields() {
       />
       <SelectField
         name="select"
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'Select',
         }}
         component={{
-          options: ['a', 'b'].map(toFormInputOption),
+          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 />
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.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 2e21d9a5..af1e50f2 100644
--- a/src/Select/index.tsx
+++ b/src/Select/index.tsx
@@ -1,29 +1,52 @@
+import { Modify } from '@mll-lab/js-utils';
 import { Select as AntdSelect, SelectProps as AntdSelectProps } from 'antd';
-import { BaseOptionType, DefaultOptionType } from 'antd/lib/select';
 import { BaseSelectRef } from 'rc-select';
+import type { FilterFunc as AntdFilterFunc } from 'rc-select/es/Select';
 import React, {
   ForwardedRef,
   forwardRef,
   ReactElement,
+  ReactNode,
   RefAttributes,
   useCallback,
 } from 'react';
 import styled from 'styled-components';
 
+import { FormInputOption } from '../Form';
 import { fontSizeFromTheme } from '../styled-utils';
 
-export type GroupedOptionType = {
-  label: string;
-  options: BaseOptionType | DefaultOptionType;
+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 GroupedInputOption<
+  TValue = unknown,
+  TLabel extends ReactNode = ReactNode,
+> = {
+  label: TLabel;
+  options: Array<FormInputOption<TValue, TLabel>>;
+  disabled?: boolean;
 };
 
+export type FilterOptionFunction<
+  TValue = unknown,
+  TOption extends
+    MaybeGroupedInputOption<TValue> = MaybeGroupedInputOption<TValue>,
+> = AntdFilterFunc<TOption>;
+
 export type SelectProps<
-  ValueType = unknown,
-  OptionType extends
-    | BaseOptionType
-    | DefaultOptionType
-    | GroupedOptionType = DefaultOptionType,
-> = AntdSelectProps<ValueType, OptionType> & RefAttributes<BaseSelectRef>;
+  TValue = unknown,
+  TOption extends
+    MaybeGroupedInputOption<TValue> = MaybeGroupedInputOption<TValue>,
+> = Modify<
+  AntdSelectProps<TValue, TOption>,
+  {
+    filterOption?: boolean | FilterOptionFunction<TValue, TOption>;
+  }
+> &
+  RefAttributes<BaseSelectRef>;
 
 const StyledSelect = styled(AntdSelect)`
   &,
@@ -52,10 +75,10 @@ const StyledDropdown = styled.div`
 `;
 
 function SelectInner<
-  ValueType = unknown,
-  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+  TValue,
+  TOptionType extends MaybeGroupedInputOption<TValue>,
 >(
-  { children, dropdownRender, ...props }: SelectProps<ValueType, OptionType>,
+  { children, dropdownRender, ...props }: SelectProps<TValue, TOptionType>,
   ref: ForwardedRef<BaseSelectRef>,
 ) {
   const styledDropdownRender = useCallback(
@@ -68,7 +91,7 @@ function SelectInner<
   );
 
   return (
-    <StyledSelect<ValueType, OptionType>
+    <StyledSelect<TValue, TOptionType>
       ref={ref}
       dropdownRender={styledDropdownRender}
       {...props}
@@ -78,17 +101,12 @@ 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,
+  TOptionType extends
+    MaybeGroupedInputOption<TValue> = MaybeGroupedInputOption<TValue>,
 >(
-  props: SelectProps<TValue, TOption> & RefAttributes<BaseSelectRef>,
+  props: SelectProps<TValue, TOptionType>,
 ) => ReactElement) & {
   Option: typeof AntdSelect.Option;
   OptGroup: typeof AntdSelect.OptGroup;