diff --git a/packages/codemods/src/transforms/v7/common/warnSelectOnChange.ts b/packages/codemods/src/transforms/v7/common/warnSelectOnChange.ts
new file mode 100644
index 0000000000..3840180ddc
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/common/warnSelectOnChange.ts
@@ -0,0 +1,16 @@
+import { API, Collection } from 'jscodeshift';
+import { report } from '../../../report';
+
+export const warnSelectOnChange = (api: API, source: Collection, componentName: string) => {
+  const j = api.jscodeshift;
+  source
+    .find(j.JSXOpeningElement, { name: { name: componentName } })
+    .find(j.JSXAttribute)
+    .filter((attr) => attr.node.name.name === 'onChange')
+    .forEach(() => {
+      report(
+        api,
+        `Manual changes required for ${componentName}'s "onChange" prop: need to change event argument to select value`,
+      );
+    });
+};
diff --git a/packages/codemods/src/transforms/v7/custom-select.ts b/packages/codemods/src/transforms/v7/custom-select.ts
index 6a34a10823..da8beb446d 100644
--- a/packages/codemods/src/transforms/v7/custom-select.ts
+++ b/packages/codemods/src/transforms/v7/custom-select.ts
@@ -1,6 +1,7 @@
 import { API, FileInfo } from 'jscodeshift';
 import { getImportInfo, removeProps } from '../../codemod-helpers';
 import { JSCodeShiftOptions } from '../../types';
+import { warnSelectOnChange } from './common/warnSelectOnChange';
 
 export const parser = 'tsx';
 
@@ -19,6 +20,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
   removeProps(j, api, source, localName, PROPS_TO_REMOVE, () => {
     return `need to remove props ${PROPS_TO_REMOVE.join(', ')}`;
   });
+  warnSelectOnChange(api, source, localName);
 
   return source.toSource();
 }
diff --git a/packages/codemods/src/transforms/v7/native-select.ts b/packages/codemods/src/transforms/v7/native-select.ts
new file mode 100644
index 0000000000..56ff172599
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/native-select.ts
@@ -0,0 +1,21 @@
+import { API, FileInfo } from 'jscodeshift';
+import { getImportInfo } from '../../codemod-helpers';
+import { JSCodeShiftOptions } from '../../types';
+import { warnSelectOnChange } from './common/warnSelectOnChange';
+
+export const parser = 'tsx';
+
+export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) {
+  const { alias } = options;
+  const j = api.jscodeshift;
+  const source = j(file.source);
+  const { localName } = getImportInfo(j, file, 'NativeSelect', alias);
+
+  if (!localName) {
+    return source.toSource();
+  }
+
+  warnSelectOnChange(api, source, localName);
+
+  return source.toSource();
+}
diff --git a/packages/codemods/src/transforms/v7/select.ts b/packages/codemods/src/transforms/v7/select.ts
index de1d59af25..1fcb3bef5f 100644
--- a/packages/codemods/src/transforms/v7/select.ts
+++ b/packages/codemods/src/transforms/v7/select.ts
@@ -1,6 +1,7 @@
 import { API, FileInfo } from 'jscodeshift';
 import { getImportInfo, removeProps } from '../../codemod-helpers';
 import { JSCodeShiftOptions } from '../../types';
+import { warnSelectOnChange } from './common/warnSelectOnChange';
 
 export const parser = 'tsx';
 
@@ -19,6 +20,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
   removeProps(j, api, source, localName, PROPS_TO_REMOVE, () => {
     return `need to remove props ${PROPS_TO_REMOVE.join(', ')}`;
   });
+  warnSelectOnChange(api, source, localName);
 
   return source.toSource();
 }
diff --git a/packages/vkui/src/components/Avatar/Readme.md b/packages/vkui/src/components/Avatar/Readme.md
index 465ee4f8a8..5185a87150 100644
--- a/packages/vkui/src/components/Avatar/Readme.md
+++ b/packages/vkui/src/components/Avatar/Readme.md
@@ -173,7 +173,7 @@ const AvatarPropsForm = ({
             { label: 'blue', value: 'blue' },
           ]}
           value={gradientColor}
-          onChange={(e) => setGradientColor(e.target.value)}
+          onChange={setGradientColor}
         />
       </FormItem>
 
@@ -196,7 +196,7 @@ const AvatarPropsForm = ({
               { label: 'preset="online-mobile"', value: 'online-mobile' },
             ]}
             value={badge}
-            onChange={(e) => setBadge(e.target.value)}
+            onChange={setBadge}
           />
         </FormItem>
         <FormItem top="Avatar.Badge[background]">
@@ -208,7 +208,7 @@ const AvatarPropsForm = ({
             ]}
             value={badgeBackground}
             disabled={badge !== 'children'}
-            onChange={(e) => setBadgeBackground(e.target.value)}
+            onChange={setBadgeBackground}
           />
         </FormItem>
       </FormLayoutGroup>
@@ -231,7 +231,7 @@ const AvatarPropsForm = ({
             ]}
             value={overlayTheme}
             disabled={!overlay}
-            onChange={(e) => setOverlayTheme(e.target.value)}
+            onChange={setOverlayTheme}
           />
         </FormItem>
         <FormItem top="Avatar.Overlay[visibility]">
@@ -243,7 +243,7 @@ const AvatarPropsForm = ({
             ]}
             value={overlayVisibility}
             disabled={!overlay}
-            onChange={(e) => setOverlayVisibility(e.target.value)}
+            onChange={setOverlayVisibility}
           />
         </FormItem>
       </FormLayoutGroup>
diff --git a/packages/vkui/src/components/Button/Readme.md b/packages/vkui/src/components/Button/Readme.md
index 3188f5d5fc..0c03463f64 100644
--- a/packages/vkui/src/components/Button/Readme.md
+++ b/packages/vkui/src/components/Button/Readme.md
@@ -71,7 +71,7 @@ const Example = () => {
         <FormItem top="appearance">
           <Select
             value={appearance}
-            onChange={(e) => setAppearance(e.target.value)}
+            onChange={setAppearance}
             options={[
               { label: 'accent', value: 'accent' },
               { label: 'positive', value: 'positive' },
@@ -85,7 +85,7 @@ const Example = () => {
         <FormItem top="size">
           <Select
             value={size}
-            onChange={(e) => setSize(e.target.value)}
+            onChange={setSize}
             options={[
               { label: 's', value: 's' },
               { label: 'm', value: 'm' },
@@ -96,7 +96,7 @@ const Example = () => {
         <FormItem top="align">
           <Select
             value={align}
-            onChange={(e) => setAlign(e.target.value)}
+            onChange={setAlign}
             options={[
               { label: 'left', value: 'left' },
               { label: 'center', value: 'center' },
@@ -107,7 +107,7 @@ const Example = () => {
         <FormItem top="sizeY">
           <Select
             value={sizeY}
-            onChange={(e) => setSizeY(e.target.value)}
+            onChange={setSizeY}
             options={[
               { label: 'compact', value: 'compact' },
               {
diff --git a/packages/vkui/src/components/ButtonGroup/Readme.md b/packages/vkui/src/components/ButtonGroup/Readme.md
index 04ef8cd919..619937b0d2 100644
--- a/packages/vkui/src/components/ButtonGroup/Readme.md
+++ b/packages/vkui/src/components/ButtonGroup/Readme.md
@@ -32,7 +32,7 @@ const ButtonGroupPropsForm = ({
         <FormItem top="mode">
           <Select
             value={mode}
-            onChange={(e) => handleChange('mode', e.target.value)}
+            onChange={(newValue) => handleChange('mode', newValue)}
             options={[
               { label: 'vertical', value: 'vertical' },
               { label: 'horizontal', value: 'horizontal' },
@@ -43,7 +43,7 @@ const ButtonGroupPropsForm = ({
       <FormItem top="gap">
         <Select
           value={gap}
-          onChange={(e) => handleChange('gap', e.target.value)}
+          onChange={(newValue) => handleChange('gap', newValue)}
           options={[
             { label: 'none', value: 'none' },
             { label: 'space', value: 'space' },
@@ -55,7 +55,7 @@ const ButtonGroupPropsForm = ({
       <FormItem top="align">
         <Select
           value={align}
-          onChange={(e) => handleChange('align', e.target.value)}
+          onChange={(newValue) => handleChange('align', newValue)}
           options={[
             { label: 'left', value: 'left' },
             { label: 'center', value: 'center' },
@@ -402,7 +402,7 @@ const Example = () => {
         <FormItem top="sizeY">
           <Select
             value={sizeY}
-            onChange={(e) => setSizeY(e.target.value)}
+            onChange={setSizeY}
             options={[
               { label: 'compact', value: 'compact' },
               { label: 'regular', value: 'regular' },
diff --git a/packages/vkui/src/components/Calendar/Readme.md b/packages/vkui/src/components/Calendar/Readme.md
index 423f0e6715..0b0ad69404 100644
--- a/packages/vkui/src/components/Calendar/Readme.md
+++ b/packages/vkui/src/components/Calendar/Readme.md
@@ -60,7 +60,7 @@ const Example = () => {
         <Select
           style={{ width: 100 }}
           value={locale}
-          onChange={(e) => setLocale(e.target.value)}
+          onChange={setLocale}
           options={[
             {
               label: 'ru',
@@ -85,7 +85,7 @@ const Example = () => {
         <Select
           style={{ width: 100 }}
           value={size}
-          onChange={(e) => setSize(e.target.value)}
+          onChange={setSize}
           options={[
             {
               label: 's',
diff --git a/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx b/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx
index 5d26a0dc45..29d0e67426 100644
--- a/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx
+++ b/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx
@@ -12,7 +12,7 @@ import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../l
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
-import { CustomSelect } from '../CustomSelect/CustomSelect';
+import { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable } from '../Tappable/Tappable';
 import { Paragraph } from '../Typography/Paragraph/Paragraph';
@@ -80,13 +80,11 @@ export const CalendarHeader = ({
 }: CalendarHeaderProps): React.ReactNode => {
   const { locale } = useConfigProvider();
   const onMonthsChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) =>
-      onChange(setMonth(viewDate, Number(event.target.value))),
+    (newValue: SelectProps['value']) => onChange(setMonth(viewDate, Number(newValue))),
     [onChange, viewDate],
   );
   const onYearChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) =>
-      onChange(setYear(viewDate, Number(event.target.value))),
+    (newValue: SelectProps['value']) => onChange(setYear(viewDate, Number(newValue))),
     [onChange, viewDate],
   );
 
diff --git a/packages/vkui/src/components/CalendarRange/Readme.md b/packages/vkui/src/components/CalendarRange/Readme.md
index b4c96ce412..4faf95dad3 100644
--- a/packages/vkui/src/components/CalendarRange/Readme.md
+++ b/packages/vkui/src/components/CalendarRange/Readme.md
@@ -37,7 +37,7 @@ const Example = () => {
         <Select
           style={{ width: 100 }}
           value={locale}
-          onChange={(e) => setLocale(e.target.value)}
+          onChange={setLocale}
           options={[
             {
               label: 'ru',
diff --git a/packages/vkui/src/components/CalendarTime/CalendarTime.tsx b/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
index adf19ee50d..c18cacb12a 100644
--- a/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
+++ b/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { setHours, setMinutes } from 'date-fns';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { Button } from '../Button/Button';
-import { CustomSelect } from '../CustomSelect/CustomSelect';
+import { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';
 import styles from './CalendarTime.module.css';
 
 export interface CalendarTimeProps {
@@ -55,13 +55,11 @@ export const CalendarTime = ({
     : minutes;
 
   const onHoursChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) =>
-      onChange?.(setHours(value, Number(event.target.value))),
+    (newValue: SelectProps['value']) => onChange?.(setHours(value, Number(newValue))),
     [onChange, value],
   );
   const onMinutesChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) =>
-      onChange?.(setMinutes(value, Number(event.target.value))),
+    (newValue: SelectProps['value']) => onChange?.(setMinutes(value, Number(newValue))),
     [onChange, value],
   );
 
diff --git a/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx b/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx
index edc3889d98..761abe77b1 100644
--- a/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx
+++ b/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx
@@ -31,16 +31,15 @@ const getCustomSelectValue = () => screen.getByTestId('labelTextTestId').textCon
 const CustomSelectControlled = ({
   options,
   initialValue,
-  onChangeStub,
+  onChange,
   ...restProps
-}: Omit<SelectProps, 'value' | 'onChange'> & {
+}: Omit<SelectProps, 'value'> & {
   initialValue?: string;
-  onChangeStub?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
 }) => {
-  const [value, setValue] = React.useState(initialValue);
-  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
-    setValue(event.target.value);
-    onChangeStub?.(event);
+  const [value, setValue] = React.useState<SelectProps['value']>(initialValue);
+  const handleChange: SelectProps['onChange'] = (newValue) => {
+    setValue(newValue);
+    onChange?.(newValue);
   };
   return <CustomSelect {...restProps} options={options} value={value} onChange={handleChange} />;
 };
@@ -122,7 +121,7 @@ describe('CustomSelect', () => {
 
   it('works correctly as controlled component', () => {
     const SelectController = () => {
-      const [value, setValue] = useState(0);
+      const [value, setValue] = useState<SelectProps['value']>(0);
       const options = [
         { value: 0, label: 'Mike' },
         { value: 1, label: 'Josh' },
@@ -132,7 +131,7 @@ describe('CustomSelect', () => {
           labelTextTestId="labelTextTestId"
           options={options}
           value={value}
-          onChange={(e) => setValue(Number(e.target.value))}
+          onChange={setValue}
         />
       );
     };
@@ -582,7 +581,7 @@ describe('CustomSelect', () => {
     expect(onChange).toHaveBeenCalledTimes(0);
   });
 
-  it('clear value externally with empty string', () => {
+  it('clear value externally with empty value', () => {
     const onChange = jest.fn();
 
     const { rerender } = render(
@@ -607,7 +606,7 @@ describe('CustomSelect', () => {
           { value: 1, label: 'Josh' },
         ]}
         onChange={onChange}
-        value=""
+        value={null}
       />,
     );
 
@@ -679,7 +678,7 @@ describe('CustomSelect', () => {
         ]}
         allowClearButton
         onChange={onChange}
-        value=""
+        value={null}
       />,
     );
 
@@ -691,7 +690,7 @@ describe('CustomSelect', () => {
   });
 
   it('(uncontrolled): calls onChange when click on unselected option and does not call when click on selected ', async () => {
-    const onChange = jest.fn((event: React.ChangeEvent<HTMLSelectElement>) => event.target.value);
+    const onChange = jest.fn();
 
     render(
       <CustomSelect
@@ -716,7 +715,7 @@ describe('CustomSelect', () => {
     fireEvent.click(unselectedOption);
 
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveReturnedWith('1');
+    expect(onChange).toHaveBeenCalledWith('1');
 
     fireEvent.click(screen.getByTestId('labelTextTestId'));
 
@@ -725,12 +724,12 @@ describe('CustomSelect', () => {
     fireEvent.click(selectedOption);
 
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveReturnedWith('1');
+    expect(onChange).toHaveBeenCalledWith('1');
   });
 
   it('(controlled): calls onChange expected amount of times after clearing component and clicking on option without updating controlled prop value', async () => {
     // мы намеренно проверяем кейсы где при нажатии на опцию или на кнопку очистки value проп не меняется
-    const onChange = jest.fn((event: React.ChangeEvent<HTMLSelectElement>) => event.target.value);
+    const onChange = jest.fn();
 
     const { rerender } = render(
       <CustomSelect
@@ -762,7 +761,7 @@ describe('CustomSelect', () => {
     fireEvent.click(unselectedOptionFirstClick);
 
     expect(onChange).toHaveBeenCalledTimes(2);
-    expect(onChange).toHaveReturnedWith('1');
+    expect(onChange).toHaveBeenCalledWith('1');
 
     // clear input through prop
     rerender(
@@ -774,7 +773,7 @@ describe('CustomSelect', () => {
         ]}
         allowClearButton
         onChange={onChange}
-        value=""
+        value={null}
       />,
     );
 
@@ -800,7 +799,7 @@ describe('CustomSelect', () => {
   });
 
   it('(controlled): calls onChange when click on unselected option without value change', async () => {
-    const onChange = jest.fn((event: React.ChangeEvent<HTMLSelectElement>) => event.target.value);
+    const onChange = jest.fn();
 
     render(
       <CustomSelect
@@ -829,7 +828,7 @@ describe('CustomSelect', () => {
     fireEvent.click(unselectedOptionFirstClick);
 
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveReturnedWith('1');
+    expect(onChange).toHaveBeenCalledWith('1');
 
     // второй клик по не выбранной опции без изменения value
     // нужно проверить потому что при первом клике внутреннее value CustomSelect (nativeSelectValue) изменилось
@@ -845,7 +844,7 @@ describe('CustomSelect', () => {
     fireEvent.click(unselectedOptionSecondClick);
 
     expect(onChange).toHaveBeenCalledTimes(2);
-    expect(onChange).toHaveReturnedWith('1');
+    expect(onChange).toHaveBeenCalledWith('1');
 
     // третий клик уже по выбранной опции (соответствующей value переданному в CustomSelect)
     // onChange не должен вызываться.
@@ -858,13 +857,11 @@ describe('CustomSelect', () => {
     fireEvent.click(selectedOptionThirdClick);
 
     expect(onChange).toHaveBeenCalledTimes(2);
-    expect(onChange).toHaveReturnedWith('1');
+    expect(onChange).toHaveBeenCalledWith('1');
   });
 
   it('(controlled): does not call onChange on already selected', async () => {
-    const onChangeStub = jest.fn((event: React.ChangeEvent<HTMLSelectElement>) => {
-      return event.target.value;
-    });
+    const onChangeStub = jest.fn();
 
     render(
       <CustomSelectControlled
@@ -874,7 +871,7 @@ describe('CustomSelect', () => {
           { value: 0, label: 'Mike' },
           { value: 1, label: 'Josh' },
         ]}
-        onChangeStub={onChangeStub}
+        onChange={onChangeStub}
       />,
     );
 
@@ -893,7 +890,7 @@ describe('CustomSelect', () => {
 
     // onChange должен вызываться
     expect(onChangeStub).toHaveBeenCalledTimes(1);
-    expect(onChangeStub).toHaveReturnedWith('1');
+    expect(onChangeStub).toHaveBeenCalledWith('1');
 
     // второй клик по выбранной опции
     fireEvent.click(screen.getByTestId('labelTextTestId'));
@@ -903,7 +900,7 @@ describe('CustomSelect', () => {
 
     // onChange не должен вызываться
     expect(onChangeStub).toHaveBeenCalledTimes(1);
-    expect(onChangeStub).toHaveReturnedWith('1');
+    expect(onChangeStub).toHaveBeenCalledWith('1');
 
     // третий клик по не выбранной опции
     fireEvent.click(screen.getByTestId('labelTextTestId'));
@@ -917,7 +914,7 @@ describe('CustomSelect', () => {
 
     // onChange должен быть вызван
     expect(onChangeStub).toHaveBeenCalledTimes(2);
-    expect(onChangeStub).toHaveReturnedWith('0');
+    expect(onChangeStub).toHaveBeenCalledWith('0');
 
     // четвертый клик по выбранной опции
     fireEvent.click(screen.getByTestId('labelTextTestId'));
@@ -927,11 +924,11 @@ describe('CustomSelect', () => {
 
     // onChange не должен вызываться
     expect(onChangeStub).toHaveBeenCalledTimes(2);
-    expect(onChangeStub).toHaveReturnedWith('0');
+    expect(onChangeStub).toHaveBeenCalledWith('0');
   });
 
   it('(controlled): does call onChange on option click when prop value is empty and value is not changing', async () => {
-    const onChange = jest.fn((event: React.ChangeEvent<HTMLSelectElement>) => event.target.value);
+    const onChange = jest.fn();
 
     render(
       <CustomSelect
@@ -943,7 +940,7 @@ describe('CustomSelect', () => {
         ]}
         allowClearButton
         onChange={onChange}
-        value=""
+        value={null}
       />,
     );
 
@@ -961,7 +958,7 @@ describe('CustomSelect', () => {
 
     // onChange должен быть вызван
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveReturnedWith('0');
+    expect(onChange).toHaveBeenCalledWith('0');
 
     // второй клик по другой опции без изменения value
     fireEvent.click(screen.getByTestId('inputTestId'));
@@ -974,7 +971,7 @@ describe('CustomSelect', () => {
 
     // onChange должен быть вызван
     expect(onChange).toHaveBeenCalledTimes(2);
-    expect(onChange).toHaveReturnedWith('1');
+    expect(onChange).toHaveBeenCalledWith('1');
 
     // третий клик по той же опции что и в предыдущий раз
     fireEvent.click(screen.getByTestId('inputTestId'));
@@ -987,7 +984,7 @@ describe('CustomSelect', () => {
 
     // onChange должен быть вызван
     expect(onChange).toHaveBeenCalledTimes(3);
-    expect(onChange).toHaveReturnedWith('0');
+    expect(onChange).toHaveBeenCalledWith('0');
   });
 
   it('accepts options with extended option type and Typescript does not throw', () => {
@@ -1104,6 +1101,7 @@ describe('CustomSelect', () => {
         ]}
         placeholder="Не выбрано"
         allowClearButton
+        value={null}
       />,
     );
 
diff --git a/packages/vkui/src/components/CustomSelect/CustomSelect.tsx b/packages/vkui/src/components/CustomSelect/CustomSelect.tsx
index d41a6bf91b..455194201e 100644
--- a/packages/vkui/src/components/CustomSelect/CustomSelect.tsx
+++ b/packages/vkui/src/components/CustomSelect/CustomSelect.tsx
@@ -20,7 +20,16 @@ import {
 } from '../CustomSelectOption/CustomSelectOption';
 import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import type { FormFieldProps } from '../FormField/FormField';
-import type { NativeSelectProps } from '../NativeSelect/NativeSelect';
+import {
+  NOT_SELECTED,
+  remapFromNativeValueToSelectValue,
+  remapFromSelectValueToNativeValue,
+} from '../NativeSelect/NativeSelect';
+import type {
+  NativeSelectProps,
+  NativeSelectValue,
+  SelectValue,
+} from '../NativeSelect/NativeSelect';
 import type { SelectType } from '../Select/Select';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
@@ -76,6 +85,24 @@ const checkOptionsValueType = <T extends CustomSelectOptionInterface>(options: T
   }
 };
 
+const checkMixControlledAndUncontrolledState = (
+  oldIsControlled: boolean,
+  newIsControlled: boolean,
+) => {
+  if (!oldIsControlled && newIsControlled) {
+    warn(
+      `Похоже, что компонент был переведен из состояния Uncontrolled в Controlled. Пожалуйста, не делайте так. Если вам нужно отобразить невыбранное состояние компонента, используйте value=null вместо undefined`,
+      'error',
+    );
+  }
+  if (oldIsControlled && !newIsControlled) {
+    warn(
+      `Похоже, что компонент был переведен из состояния Controlled в Uncontrolled. Пожалуйста, не делайте так. Если вам нужно отобразить невыбранное состояние компонента, используйте value=null вместо undefined`,
+      'error',
+    );
+  }
+};
+
 function defaultRenderOptionFn<T extends CustomSelectOptionInterface>({
   option,
   ...props
@@ -90,9 +117,8 @@ const handleOptionDown: MouseEventHandler = (e: React.MouseEvent<HTMLElement>) =
 function findSelectedIndex<T extends CustomSelectOptionInterface>(
   options: T[] = [],
   value: SelectValue,
-  withClear: boolean,
 ) {
-  if (withClear && value === '') {
+  if (value === NOT_SELECTED.CUSTOM) {
     return -1;
   }
   return (
@@ -113,10 +139,8 @@ const filter = <T extends CustomSelectOptionInterface>(
     : options;
 };
 
-type SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>['value'];
-
 export interface CustomSelectOptionInterface {
-  value: SelectValue;
+  value: Exclude<SelectValue, null>;
   label: React.ReactElement | string;
   disabled?: boolean;
   [index: string]: any;
@@ -283,25 +307,40 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | undefined>(-1);
   const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
   const [inputValue, setInputValue] = React.useState('');
-  const [nativeSelectValue, setNativeSelectValue] = React.useState(
-    () => props.value ?? defaultValue ?? (allowClearButton ? '' : undefined),
-  );
+  const [nativeSelectValue, setNativeSelectValue] = React.useState<NativeSelectValue>(() => {
+    if (props.value !== undefined) {
+      return remapFromSelectValueToNativeValue(props.value);
+    }
+    if (defaultValue !== undefined) {
+      return remapFromSelectValueToNativeValue(defaultValue);
+    }
+    return NOT_SELECTED.NATIVE;
+  });
 
   const [popperPlacement, setPopperPlacement] = React.useState<Placement>(popupDirection);
   const [options, setOptions] = React.useState(optionsProp);
   const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<number | undefined>(
-    findSelectedIndex(optionsProp, props.value ?? defaultValue, allowClearButton),
+    findSelectedIndex(optionsProp, props.value ?? defaultValue ?? null),
   );
 
   React.useEffect(() => {
-    setIsControlledOutside(props.value !== undefined);
-    setNativeSelectValue((nativeSelectValue) => props.value ?? nativeSelectValue);
+    setIsControlledOutside((oldIsControlled) => {
+      const newIsControlled = props.value !== undefined;
+      checkMixControlledAndUncontrolledState(oldIsControlled, newIsControlled);
+      return newIsControlled;
+    });
+    setNativeSelectValue((nativeSelectValue) => {
+      if (props.value !== undefined) {
+        return remapFromSelectValueToNativeValue(props.value);
+      }
+      return nativeSelectValue;
+    });
   }, [props.value]);
 
   useIsomorphicLayoutEffect(() => {
     if (
       options.some(({ value }) => nativeSelectValue === value) ||
-      (allowClearButton && nativeSelectValue === '')
+      (allowClearButton && nativeSelectValue === NOT_SELECTED.NATIVE)
     ) {
       const event = new Event('change', { bubbles: true });
 
@@ -432,8 +471,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const selectOption = React.useCallback(
     (index: number) => {
       const item = options[index];
-
-      setNativeSelectValue(item?.value);
+      setNativeSelectValue(item?.value ?? NOT_SELECTED.NATIVE);
       close();
 
       const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync =
@@ -506,7 +544,10 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
 
   React.useEffect(
     function updateOptionsAndSelectedOptionIndex() {
-      const value = props.value ?? nativeSelectValue ?? defaultValue;
+      const value =
+        props.value !== undefined
+          ? props.value
+          : remapFromNativeValueToSelectValue(nativeSelectValue);
 
       const options =
         searchable && inputValue !== undefined
@@ -514,32 +555,20 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
           : optionsProp;
 
       setOptions(options);
-      setSelectedOptionIndex(findSelectedIndex(options, value, allowClearButton));
+      setSelectedOptionIndex(findSelectedIndex(options, value));
     },
-    [
-      filterFn,
-      inputValue,
-      nativeSelectValue,
-      optionsProp,
-      defaultValue,
-      props.value,
-      searchable,
-      allowClearButton,
-    ],
+    [filterFn, inputValue, nativeSelectValue, optionsProp, defaultValue, props.value, searchable],
   );
 
   const onNativeSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
-    const newSelectedOptionIndex = findSelectedIndex(
-      options,
-      e.currentTarget.value,
-      allowClearButton,
-    );
+    const remappedNativeValue = remapFromNativeValueToSelectValue(e.currentTarget.value);
+    const newSelectedOptionIndex = findSelectedIndex(options, remappedNativeValue);
 
     if (selectedOptionIndex !== newSelectedOptionIndex) {
       if (!isControlledOutside) {
         setSelectedOptionIndex(newSelectedOptionIndex);
       }
-      onChange?.(e);
+      onChange?.(remappedNativeValue);
     }
   };
 
@@ -549,11 +578,11 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
 
       const options = filter(optionsProp, e.target.value, filterFn);
       setOptions(options);
-      setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));
+      setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue));
 
       setInputValue(e.target.value);
     },
-    [filterFn, nativeSelectValue, onInputChangeProp, optionsProp, allowClearButton],
+    [filterFn, nativeSelectValue, onInputChangeProp, optionsProp],
   );
 
   const areOptionsShown = React.useCallback(() => {
@@ -711,8 +740,8 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
 
   const selectInputRef = useExternRef(getSelectInputRef);
 
-  const controlledValueSet = isControlledOutside && props.value !== '';
-  const uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== '';
+  const controlledValueSet = isControlledOutside && props.value !== NOT_SELECTED.CUSTOM;
+  const uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== NOT_SELECTED.NATIVE;
   const clearButtonShown =
     allowClearButton && !opened && (controlledValueSet || uncontrolledValueSet);
 
@@ -725,7 +754,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
       <ClearButton
         className={iconProp === undefined ? styles.clearIcon : undefined}
         onClick={function clearSelectState() {
-          setNativeSelectValue('');
+          setNativeSelectValue(NOT_SELECTED.NATIVE);
           setInputValue('');
           selectInputRef.current && selectInputRef.current.focus();
         }}
@@ -872,7 +901,9 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         data-testid={nativeSelectTestId}
         required={required}
       >
-        {allowClearButton && <option key="" value="" />}
+        {(allowClearButton || nativeSelectValue === NOT_SELECTED.NATIVE) && (
+          <option key={NOT_SELECTED.NATIVE} value={NOT_SELECTED.NATIVE} />
+        )}
         {optionsProp.map((item) => (
           <option key={`${item.value}`} value={item.value} />
         ))}
diff --git a/packages/vkui/src/components/CustomSelect/Readme.md b/packages/vkui/src/components/CustomSelect/Readme.md
index bf34e5aecb..2170d6cac6 100644
--- a/packages/vkui/src/components/CustomSelect/Readme.md
+++ b/packages/vkui/src/components/CustomSelect/Readme.md
@@ -1,5 +1,9 @@
 Кастомизируемое поле выбора значения из раскрывающегося списка. Используется внутри [Select](#!/Select).
 
+> Важно: для отображения невыбранного состояния нужно использовать `value=null` вместо `undefined`.
+>
+> `undefined` ипользуется только для неконтролируемого компонента.
+
 ## Цифровая доступность (a11y)
 
 Следуйте рекомендациям из раздела "Цифровая доступность" компонента [Select](#!/Select).
@@ -30,6 +34,8 @@ const getUsers = (usersArray) =>
     description: user.screen_name,
   }));
 
+const users = [...getUsers(getRandomUsers(10))];
+
 const Example = () => {
   const selectTypes = [
     {
@@ -46,9 +52,7 @@ const Example = () => {
     },
   ];
 
-  const [selectType, setSelectType] = React.useState(undefined);
-
-  const users = [...getUsers(getRandomUsers(10))];
+  const [selectType, setSelectType] = React.useState(null);
 
   return (
     <Div>
@@ -64,7 +68,7 @@ const Example = () => {
             id="administrator-select-id"
             placeholder="Не выбран"
             options={users}
-            selectType={selectType}
+            selectType={selectType || 'default'}
             allowClearButton
           />
         </FormItem>
@@ -79,7 +83,7 @@ const Example = () => {
             value={selectType}
             placeholder="Не задан"
             options={selectTypes}
-            onChange={(e) => setSelectType(e.target.value)}
+            onChange={(newType) => setSelectType(newType)}
             renderOption={({ option, ...restProps }) => (
               <CustomSelectOption {...restProps} description={`"${option.value}"`} />
             )}
@@ -115,7 +119,7 @@ const Example = () => {
           id="administrator-select-id-3"
           placeholder="Не выбран"
           options={users}
-          selectType={selectType}
+          selectType={selectType || 'default'}
         />
       </FormItem>
 
@@ -176,12 +180,12 @@ const CustomSearchLogicSelect = ({ id }) => {
     return options;
   };
 
-  const onCustomSearchChange = (e) => {
-    if (e.target.value === '0') {
+  const onCustomSearchChange = (newValue) => {
+    if (newValue === '0') {
       setNewUsers([...newUsers, { label: query, value: query }]);
       setValue(query);
     } else {
-      setValue(e.target.value);
+      setValue(newValue);
     }
     setQuery('');
   };
diff --git a/packages/vkui/src/components/DateInput/Readme.md b/packages/vkui/src/components/DateInput/Readme.md
index 79eefe7ab8..e4789f2992 100644
--- a/packages/vkui/src/components/DateInput/Readme.md
+++ b/packages/vkui/src/components/DateInput/Readme.md
@@ -61,7 +61,7 @@ const Example = () => {
         <Select
           style={{ width: 100 }}
           value={locale}
-          onChange={(e) => setLocale(e.target.value)}
+          onChange={setLocale}
           options={[
             {
               label: 'ru',
diff --git a/packages/vkui/src/components/DateRangeInput/Readme.md b/packages/vkui/src/components/DateRangeInput/Readme.md
index 6d21ab56af..fc7d9438f1 100644
--- a/packages/vkui/src/components/DateRangeInput/Readme.md
+++ b/packages/vkui/src/components/DateRangeInput/Readme.md
@@ -48,7 +48,7 @@ const Example = () => {
         <Select
           style={{ width: 100 }}
           value={locale}
-          onChange={(e) => setLocale(e.target.value)}
+          onChange={setLocale}
           options={[
             {
               label: 'ru',
diff --git a/packages/vkui/src/components/Flex/Readme.md b/packages/vkui/src/components/Flex/Readme.md
index 3ab825bfe5..99cf680d56 100644
--- a/packages/vkui/src/components/Flex/Readme.md
+++ b/packages/vkui/src/components/Flex/Readme.md
@@ -142,35 +142,23 @@ const Example = () => {
         </Checkbox>
         {!complexGap && (
           <FormItem top="gap">
-            <Select
-              value={gap}
-              onChange={(e) => setGap(e.target.value)}
-              options={GapSelectValues}
-            />
+            <Select value={gap} onChange={setGap} options={GapSelectValues} />
           </FormItem>
         )}
         {complexGap && (
           <FormItem top="row gap">
-            <Select
-              value={rowGap}
-              onChange={(e) => setRowGap(e.target.value)}
-              options={GapSelectValues}
-            />
+            <Select value={rowGap} onChange={setRowGap} options={GapSelectValues} />
           </FormItem>
         )}
         {complexGap && (
           <FormItem top="column gap">
-            <Select
-              value={columnGap}
-              onChange={(e) => setColumnGap(e.target.value)}
-              options={GapSelectValues}
-            />
+            <Select value={columnGap} onChange={setColumnGap} options={GapSelectValues} />
           </FormItem>
         )}
         <FormItem top="align">
           <Select
             value={align}
-            onChange={(e) => setAlign(e.target.value)}
+            onChange={setAlign}
             placeholder="Не выбрано"
             options={[
               { label: 'start', value: 'start' },
@@ -185,7 +173,7 @@ const Example = () => {
         <FormItem top="justify">
           <Select
             value={justify}
-            onChange={(e) => setJustify(e.target.value)}
+            onChange={setJustify}
             placeholder="Не выбрано"
             options={[
               { label: 'start', value: 'start' },
diff --git a/packages/vkui/src/components/FormItem/Readme.md b/packages/vkui/src/components/FormItem/Readme.md
index d181e0dca9..91472ac797 100644
--- a/packages/vkui/src/components/FormItem/Readme.md
+++ b/packages/vkui/src/components/FormItem/Readme.md
@@ -94,18 +94,23 @@ const Example = () => {
     }
   };
 
+  const setStateActionsMap = {
+    email: updateEmail,
+    purpose: setPurpose,
+    about: setAbout,
+  };
+
   const onChange = (e) => {
     const { name, value } = e.currentTarget;
-
-    const setStateAction = {
-      email: updateEmail,
-      purpose: setPurpose,
-      about: setAbout,
-    }[name];
-
+    const setStateAction = setStateActionsMap[name];
     setStateAction && setStateAction(value);
   };
 
+  const onSelectChange = (name, newValue) => {
+    const setStateAction = setStateActionsMap[name];
+    setStateAction && setStateAction(newValue);
+  };
+
   const onShowPatronymic = () => setShowPatronymic(true);
 
   const onRemove = () => setShowPatronymic(false);
@@ -223,7 +228,7 @@ const Example = () => {
               <Select
                 id="purpose-of-the-trip-select-id"
                 placeholder="Выберите цель поездки"
-                onChange={onChange}
+                onChange={(newValue) => onSelectChange('purpose', newValue)}
                 value={purpose}
                 name="purpose"
                 required
diff --git a/packages/vkui/src/components/Image/Readme.md b/packages/vkui/src/components/Image/Readme.md
index 9036bea13d..df3765bd25 100644
--- a/packages/vkui/src/components/Image/Readme.md
+++ b/packages/vkui/src/components/Image/Readme.md
@@ -141,7 +141,7 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange }
             { label: 'l', value: 'l' },
           ]}
           value={borderRadius}
-          onChange={(e) => setBorderRadius(e.target.value)}
+          onChange={setBorderRadius}
         />
       </FormItem>
 
@@ -160,7 +160,7 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange }
             ]}
             value={badgeBackground}
             disabled={!badge}
-            onChange={(e) => setBadgeBackground(e.target.value)}
+            onChange={setBadgeBackground}
           />
         </FormItem>
       </FormLayoutGroup>
@@ -183,7 +183,7 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange }
             ]}
             value={overlayTheme}
             disabled={!overlay}
-            onChange={(e) => setOverlayTheme(e.target.value)}
+            onChange={setOverlayTheme}
           />
         </FormItem>
         <FormItem top="Image.Overlay[visibility]">
@@ -195,7 +195,7 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange }
             ]}
             value={overlayVisibility}
             disabled={!overlay}
-            onChange={(e) => setOverlayVisibility(e.target.value)}
+            onChange={setOverlayVisibility}
           />
         </FormItem>
       </FormLayoutGroup>
diff --git a/packages/vkui/src/components/Input/Readme.md b/packages/vkui/src/components/Input/Readme.md
index ed946911dc..7db9295b5a 100644
--- a/packages/vkui/src/components/Input/Readme.md
+++ b/packages/vkui/src/components/Input/Readme.md
@@ -12,7 +12,7 @@ const ExampleBase = ({ formItemStatus }) => {
       <FormItem top="align">
         <Select
           value={align}
-          onChange={(e) => setAlign(e.target.value)}
+          onChange={setAlign}
           options={[
             { label: 'left', value: 'left' },
             { label: 'center', value: 'center' },
@@ -106,7 +106,7 @@ const Example = () => {
           <FormItem top="AdaptivityProvider[sizeY]">
             <Select
               value={sizeY}
-              onChange={(e) => setSizeY(e.target.value)}
+              onChange={setSizeY}
               options={[
                 { label: 'compact', value: 'compact' },
                 { label: 'regular', value: 'regular' },
@@ -116,7 +116,7 @@ const Example = () => {
           <FormItem top="FormItem[status]">
             <Select
               value={formItemStatus}
-              onChange={(e) => setFormItemStatus(e.target.value)}
+              onChange={setFormItemStatus}
               options={[
                 { label: 'default', value: 'default' },
                 { label: 'error', value: 'error' },
diff --git a/packages/vkui/src/components/NativeSelect/NativeSelect.test.tsx b/packages/vkui/src/components/NativeSelect/NativeSelect.test.tsx
index 11488b711d..c24a7fc2e7 100644
--- a/packages/vkui/src/components/NativeSelect/NativeSelect.test.tsx
+++ b/packages/vkui/src/components/NativeSelect/NativeSelect.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { baselineComponent, userEvent } from '../../testing/utils';
-import { NativeSelect } from './NativeSelect';
+import { NativeSelect, type NativeSelectProps } from './NativeSelect';
 
 const getTarget = () => screen.getByTestId<HTMLSelectElement>('target');
 
@@ -18,9 +18,9 @@ describe('NativeSelect', () => {
 
   it('works correctly with value and onChange', async () => {
     const SelectController = () => {
-      const [value, setValue] = React.useState('0');
+      const [value, setValue] = React.useState<NativeSelectProps['value']>('0');
       return (
-        <NativeSelect data-testid="target" value={value} onChange={(e) => setValue(e.target.value)}>
+        <NativeSelect data-testid="target" value={value} onChange={setValue}>
           <option value="0">Mike</option>
           <option value="1">Josh</option>
         </NativeSelect>
diff --git a/packages/vkui/src/components/NativeSelect/NativeSelect.tsx b/packages/vkui/src/components/NativeSelect/NativeSelect.tsx
index e9386d4c1d..aaac37fc25 100644
--- a/packages/vkui/src/components/NativeSelect/NativeSelect.tsx
+++ b/packages/vkui/src/components/NativeSelect/NativeSelect.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { type ChangeEventHandler } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -19,12 +20,49 @@ const sizeYClassNames = {
   compact: styles.sizeYCompact,
 };
 
+export type SelectValue = Exclude<
+  React.SelectHTMLAttributes<HTMLSelectElement>['value'],
+  undefined
+> | null;
+
+export type NativeSelectValue = Exclude<SelectValue, null>;
+
+export const NOT_SELECTED = {
+  NATIVE: '__vkui_internal_Select_not_selected__',
+  CUSTOM: null,
+};
+
+export const remapFromSelectValueToNativeValue = (value: SelectValue): NativeSelectValue =>
+  value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value;
+
+export const remapFromNativeValueToSelectValue = (value: NativeSelectValue): SelectValue =>
+  value === NOT_SELECTED.NATIVE ? NOT_SELECTED.CUSTOM : value;
+
 export interface NativeSelectProps
-  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple'>,
+  extends Omit<
+      React.SelectHTMLAttributes<HTMLSelectElement>,
+      'multiple' | 'value' | 'defaultValue' | 'onChange'
+    >,
     HasRef<HTMLSelectElement>,
     HasRootRef<HTMLDivElement>,
     HasAlign,
     Pick<FormFieldProps, 'before' | 'status'> {
+  /**
+   * Выбранное значение.
+   *
+   * > ⚠️  Важно: При прокидывании `undefined` компонент будет считаться `Uncontrolled`.
+   * >
+   * > Не используйте `undefined`, чтобы показать невыбранное состояние. Вместо этого используйте `null`
+   */
+  value?: SelectValue;
+  /**
+   * см. `value`
+   */
+  defaultValue?: SelectValue;
+  /**
+   * Коллбэк срабатывающий при изменении выбранного значения.
+   */
+  onChange?: (newValue: SelectValue) => void;
   placeholder?: string;
   multiline?: boolean;
   selectType?: SelectType;
@@ -58,6 +96,8 @@ const NativeSelect = ({
   icon = <DropdownIcon />,
   before,
   onChange,
+  value,
+  defaultValue,
   ...restProps
 }: NativeSelectProps): React.ReactNode => {
   const [title, setTitle] = React.useState('');
@@ -69,9 +109,14 @@ const NativeSelect = ({
     const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];
     if (selectedOption) {
       setTitle(selectedOption.text);
-      setEmpty(selectedOption.value === '' && placeholder != null);
+      setEmpty(selectedOption.value === NOT_SELECTED.NATIVE && placeholder != null);
     }
   };
+
+  const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
+    const newValue = remapFromNativeValueToSelectValue(e.target.value);
+    onChange?.(newValue);
+  };
   useIsomorphicLayoutEffect(checkSelectedOption, [children]);
 
   return (
@@ -98,12 +143,18 @@ const NativeSelect = ({
     >
       <select
         {...restProps}
+        value={value !== undefined ? remapFromSelectValueToNativeValue(value) : value}
+        defaultValue={
+          defaultValue !== undefined
+            ? remapFromSelectValueToNativeValue(defaultValue)
+            : defaultValue
+        }
         disabled={disabled}
         className={styles.el}
-        onChange={callMultiple(onChange, checkSelectedOption)}
+        onChange={callMultiple(_onChange, checkSelectedOption)}
         ref={selectRef}
       >
-        {placeholder && <option value="">{placeholder}</option>}
+        {placeholder && <option value={NOT_SELECTED.NATIVE}>{placeholder}</option>}
         {children}
       </select>
       <div className={styles.container} aria-hidden>
diff --git a/packages/vkui/src/components/NativeSelect/Readme.md b/packages/vkui/src/components/NativeSelect/Readme.md
index 3a66c1260b..1f0c3424c5 100644
--- a/packages/vkui/src/components/NativeSelect/Readme.md
+++ b/packages/vkui/src/components/NativeSelect/Readme.md
@@ -1,21 +1,78 @@
 Надстройка над `<select />`. Компонент принимает все валидные для этого элемента свойства.
 
+> Важно: для отображения невыбранного состояния нужно использовать `value=null` вместо `undefined`.
+>
+> `undefined` ипользуется только для неконтролируемого компонента.
+>
+> Также, чтобы отобразить невыбранное состояние необходимо задать `placeholder`
+
 ```jsx
-<View activePanel="native-select">
-  <Panel id="native-select">
-    <PanelHeader>NativeSelect</PanelHeader>
-    <Group>
+const ControlledSelect = () => {
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  return (
+    <Group header={<Header>Controlled</Header>}>
       <FormItem
         top="Выберите пол"
-        htmlFor="select-id"
+        htmlFor="gender-select-id"
         bottom="Пример селекта с возможностью выбрать пол пользователя"
       >
-        <NativeSelect id="select-id">
+        <NativeSelect
+          id="gender-select-id"
+          placeholder="Не выбрано"
+          value={selectedOption}
+          onChange={setSelectedOption}
+        >
           <option value="m">Мужской</option>
           <option value="f">Женский</option>
         </NativeSelect>
       </FormItem>
     </Group>
-  </Panel>
-</View>
+  );
+};
+
+const UncontrolledSelect = () => {
+  const cityValueToName = {
+    'Moscow': 'Москва',
+    'Saint-Petersburg': 'Caнкт-Петербург',
+  };
+  const cities = ['Moscow', 'Saint-Petersburg'];
+
+  const onChange = (newValue) =>
+    newValue
+      ? console.log('Выбран город', cityValueToName[newValue])
+      : console.log('Выбор сброшен');
+
+  return (
+    <Group header={<Header>Uncontrolled</Header>}>
+      <FormItem
+        top="Выберите город"
+        htmlFor="city-select-id"
+        bottom="Пример селекта с возможностью выбрать город"
+      >
+        <NativeSelect id="city-select-id" placeholder="Не выбрано" onChange={onChange}>
+          {cities.map((city) => (
+            <option key={city} value={city}>
+              {cityValueToName[city]}
+            </option>
+          ))}
+        </NativeSelect>
+      </FormItem>
+    </Group>
+  );
+};
+
+const Example = () => {
+  return (
+    <View activePanel="native-select">
+      <Panel id="native-select">
+        <PanelHeader>Native Select</PanelHeader>
+        <ControlledSelect />
+        <UncontrolledSelect />
+      </Panel>
+    </View>
+  );
+};
+
+<Example />;
 ```
diff --git a/packages/vkui/src/components/Pagination/Readme.md b/packages/vkui/src/components/Pagination/Readme.md
index e2f955e348..207b8eb9d0 100644
--- a/packages/vkui/src/components/Pagination/Readme.md
+++ b/packages/vkui/src/components/Pagination/Readme.md
@@ -89,7 +89,7 @@ const Example = () => {
         <FormItem top="sizeY">
           <Select
             value={sizeY}
-            onChange={(e) => setSizeY(e.target.value)}
+            onChange={setSizeY}
             options={[
               { label: 'compact', value: 'compact' },
               { label: 'regular', value: 'regular' },
@@ -99,7 +99,7 @@ const Example = () => {
         <FormItem top="prop[navigationButtonsStyle]">
           <Select
             value={navigationButtonsStyle}
-            onChange={(e) => setNavigationButtonsStyle(e.target.value)}
+            onChange={setNavigationButtonsStyle}
             options={[
               { label: 'icon', value: 'icon' },
               { label: 'caption', value: 'caption' },
diff --git a/packages/vkui/src/components/Select/Readme.md b/packages/vkui/src/components/Select/Readme.md
index 97c49e28c1..0c1ca1f3ad 100644
--- a/packages/vkui/src/components/Select/Readme.md
+++ b/packages/vkui/src/components/Select/Readme.md
@@ -1,5 +1,9 @@
 Отрисовывает [CustomSelect](#!/CustomSelect), если есть мышка, либо [NativeSelect](#!/NativeSelect)
 
+> Важно: для отображения невыбранного состояния нужно использовать `value=null` вместо `undefined`.
+>
+> `undefined` ипользуется только для неконтролируемого компонента.
+
 ## Цифровая доступность (a11y)
 
 Старайтесь сопровождать элемент текстовым описанием, для корректной работы скринридеров.
diff --git a/packages/vkui/src/components/SimpleGrid/Readme.md b/packages/vkui/src/components/SimpleGrid/Readme.md
index ae11a8d27e..0b5f890a46 100644
--- a/packages/vkui/src/components/SimpleGrid/Readme.md
+++ b/packages/vkui/src/components/SimpleGrid/Readme.md
@@ -139,7 +139,7 @@ const Example = () => {
         <FormItem top="align">
           <Select
             value={align}
-            onChange={(e) => setAlign(e.target.value || 'stretch')}
+            onChange={(newValue) => setAlign(newValue || 'stretch')}
             placeholder="Не выбрано"
             options={[
               { label: 'start', value: 'start' },
@@ -156,29 +156,17 @@ const Example = () => {
         </Checkbox>
         {!complexGap && (
           <FormItem top="gap">
-            <Select
-              value={gap}
-              onChange={(e) => setGap(e.target.value)}
-              options={GapSelectValues}
-            />
+            <Select value={gap} onChange={setGap} options={GapSelectValues} />
           </FormItem>
         )}
         {complexGap && (
           <FormItem top="row gap">
-            <Select
-              value={rowGap}
-              onChange={(e) => setRowGap(e.target.value)}
-              options={GapSelectValues}
-            />
+            <Select value={rowGap} onChange={setRowGap} options={GapSelectValues} />
           </FormItem>
         )}
         {complexGap && (
           <FormItem top="column gap">
-            <Select
-              value={columnGap}
-              onChange={(e) => setColumnGap(e.target.value)}
-              options={GapSelectValues}
-            />
+            <Select value={columnGap} onChange={setColumnGap} options={GapSelectValues} />
           </FormItem>
         )}
       </div>
diff --git a/packages/vkui/src/components/Slider/Readme.md b/packages/vkui/src/components/Slider/Readme.md
index fce3f87348..2e39a2e946 100644
--- a/packages/vkui/src/components/Slider/Readme.md
+++ b/packages/vkui/src/components/Slider/Readme.md
@@ -63,11 +63,7 @@ const Example = () => {
             />
           </FormItem>
           <FormItem>
-            <Select
-              value={String(valueStep)}
-              options={options()}
-              onChange={(e) => setValueStep(e.target.value)}
-            />
+            <Select value={String(valueStep)} options={options()} onChange={setValueStep} />
           </FormItem>
           <FormItem top={<span id="uncontrolled">Uncontrolled</span>}>
             <Slider defaultValue={20} aria-labelledby="uncontrolled" />
diff --git a/packages/vkui/src/components/SubnavigationButton/Readme.md b/packages/vkui/src/components/SubnavigationButton/Readme.md
index 61f3a6bfb8..96af7f93b2 100644
--- a/packages/vkui/src/components/SubnavigationButton/Readme.md
+++ b/packages/vkui/src/components/SubnavigationButton/Readme.md
@@ -46,7 +46,7 @@ const SubnavigationButtonExample = () => {
         <FormItem top="appearance">
           <Select
             value={appearance}
-            onChange={(e) => setAppearance(e.target.value)}
+            onChange={setAppearance}
             options={[
               { label: 'accent', value: 'accent' },
               { label: 'neutral', value: 'neutral' },
@@ -56,7 +56,7 @@ const SubnavigationButtonExample = () => {
         <FormItem top="text level">
           <Select
             value={textLevel}
-            onChange={(e) => setTextLevel(e.target.value)}
+            onChange={setTextLevel}
             options={[
               { label: '1', value: '1' },
               { label: '2', value: '2' },
@@ -67,7 +67,7 @@ const SubnavigationButtonExample = () => {
         <FormItem top="size">
           <Select
             value={size}
-            onChange={(e) => setSize(e.target.value)}
+            onChange={setSize}
             options={[
               { label: 's', value: 's' },
               { label: 'm', value: 'm' },
@@ -78,7 +78,7 @@ const SubnavigationButtonExample = () => {
         <FormItem top="sizeY">
           <Select
             value={sizeY}
-            onChange={(e) => setSizeY(e.target.value)}
+            onChange={setSizeY}
             options={[
               { label: 'compact', value: 'compact' },
               {
diff --git a/packages/vkui/src/components/Tabs/Readme.md b/packages/vkui/src/components/Tabs/Readme.md
index 0254ab3247..47117f6ce2 100644
--- a/packages/vkui/src/components/Tabs/Readme.md
+++ b/packages/vkui/src/components/Tabs/Readme.md
@@ -213,7 +213,7 @@ const Scrollable = () => {
               value: 'secondary',
             },
           ]}
-          onChange={(event) => setMode(event.target.value)}
+          onChange={setMode}
         />
       </FormItem>
       <FormItem top="layoutFillMode">
@@ -233,7 +233,7 @@ const Scrollable = () => {
               value: 'shrinked',
             },
           ]}
-          onChange={(event) => setLayoutFillMode(event.target.value)}
+          onChange={setLayoutFillMode}
         />
       </FormItem>
       <Checkbox onChange={() => setDisabled((prev) => !prev)}>disabled</Checkbox>
diff --git a/packages/vkui/src/components/ToolButton/Readme.md b/packages/vkui/src/components/ToolButton/Readme.md
index d6d62cca45..06f7744177 100644
--- a/packages/vkui/src/components/ToolButton/Readme.md
+++ b/packages/vkui/src/components/ToolButton/Readme.md
@@ -44,7 +44,7 @@ const Example = () => {
         <FormItem top="direction">
           <Select
             value={direction}
-            onChange={(e) => setDirection(e.target.value)}
+            onChange={setDirection}
             options={[
               { label: 'row', value: 'row' },
               { label: 'column', value: 'column' },
@@ -54,7 +54,7 @@ const Example = () => {
         <FormItem top="mode">
           <Select
             value={mode}
-            onChange={(e) => setMode(e.target.value)}
+            onChange={setMode}
             options={[
               { label: 'primary', value: 'primary' },
               { label: 'secondary', value: 'secondary' },
@@ -66,7 +66,7 @@ const Example = () => {
         <FormItem top="appearance">
           <Select
             value={appearance}
-            onChange={(e) => setAppearance(e.target.value)}
+            onChange={setAppearance}
             options={[
               { label: 'accent', value: 'accent' },
               { label: 'neutral', value: 'neutral' },
@@ -76,7 +76,7 @@ const Example = () => {
         <FormItem top="sizeY">
           <Select
             value={sizeY}
-            onChange={(e) => setSizeY(e.target.value)}
+            onChange={setSizeY}
             options={[
               { label: 'compact', value: 'compact' },
               {