From 5a0b1727660c83fb63a6de809ba52f00a5182b6e Mon Sep 17 00:00:00 2001
From: Daniil Suvorov <severecloud@gmail.com>
Date: Wed, 7 Aug 2024 15:43:24 +0300
Subject: [PATCH] feat: add SelectionControl (#7119)

---
 .../components/Checkbox/Checkbox.module.css   | 170 ---------------
 .../vkui/src/components/Checkbox/Checkbox.tsx | 196 +++---------------
 .../CheckboxInput/CheckboxInput.module.css    |  30 +++
 .../Checkbox/CheckboxInput/CheckboxInput.tsx  | 174 ++++++++++++++++
 .../CheckboxSimple/CheckboxSimple.module.css  |  28 +++
 .../CheckboxSimple/CheckboxSimple.tsx         |  49 +++++
 .../formitem-android-chromium-dark-1-snap.png |   4 +-
 ...formitem-android-chromium-light-1-snap.png |   4 +-
 .../formitem-ios-webkit-dark-1-snap.png       |   4 +-
 .../formitem-ios-webkit-light-1-snap.png      |   4 +-
 .../formitem-vkcom-chromium-dark-1-snap.png   |   4 +-
 .../formitem-vkcom-chromium-light-1-snap.png  |   4 +-
 .../formitem-vkcom-firefox-dark-1-snap.png    |   4 +-
 .../formitem-vkcom-firefox-light-1-snap.png   |   4 +-
 .../formitem-vkcom-webkit-dark-1-snap.png     |   4 +-
 .../formitem-vkcom-webkit-light-1-snap.png    |   4 +-
 .../src/components/Radio/Radio.module.css     | 131 ------------
 packages/vkui/src/components/Radio/Radio.tsx  |  67 ++----
 .../Radio/RadioInput/RadioInput.module.css    |  20 ++
 .../Radio/RadioInput/RadioInput.tsx           |  58 ++++++
 .../radio-android-chromium-dark-1-snap.png    |   4 +-
 .../radio-android-chromium-light-1-snap.png   |   4 +-
 .../radio-ios-webkit-dark-1-snap.png          |   4 +-
 .../radio-ios-webkit-light-1-snap.png         |   4 +-
 ...scription-android-chromium-dark-1-snap.png |   4 +-
 ...cription-android-chromium-light-1-snap.png |   4 +-
 ...and-description-ios-webkit-dark-1-snap.png |   4 +-
 ...nd-description-ios-webkit-light-1-snap.png |   4 +-
 ...description-vkcom-chromium-dark-1-snap.png |   4 +-
 ...escription-vkcom-chromium-light-1-snap.png |   4 +-
 ...-description-vkcom-firefox-dark-1-snap.png |   4 +-
 ...description-vkcom-firefox-light-1-snap.png |   4 +-
 ...d-description-vkcom-webkit-dark-1-snap.png |   4 +-
 ...-description-vkcom-webkit-light-1-snap.png |   4 +-
 .../radio-vkcom-chromium-dark-1-snap.png      |   4 +-
 .../radio-vkcom-chromium-light-1-snap.png     |   4 +-
 .../radio-vkcom-firefox-dark-1-snap.png       |   4 +-
 .../radio-vkcom-firefox-light-1-snap.png      |   4 +-
 .../radio-vkcom-webkit-dark-1-snap.png        |   4 +-
 .../radio-vkcom-webkit-light-1-snap.png       |   4 +-
 ...adiogroup-android-chromium-dark-1-snap.png |   4 +-
 ...diogroup-android-chromium-light-1-snap.png |   4 +-
 .../radiogroup-ios-webkit-dark-1-snap.png     |   4 +-
 .../radiogroup-ios-webkit-light-1-snap.png    |   4 +-
 .../radiogroup-vkcom-chromium-dark-1-snap.png |   4 +-
 ...radiogroup-vkcom-chromium-light-1-snap.png |   4 +-
 .../radiogroup-vkcom-firefox-dark-1-snap.png  |   4 +-
 .../radiogroup-vkcom-firefox-light-1-snap.png |   4 +-
 .../radiogroup-vkcom-webkit-dark-1-snap.png   |   4 +-
 .../radiogroup-vkcom-webkit-light-1-snap.png  |   4 +-
 .../src/components/SelectionControl/Readme.md |  18 ++
 .../SelectionControl.module.css               |  33 +++
 .../SelectionControl.test.tsx                 |   6 +
 .../SelectionControl/SelectionControl.tsx     |  44 ++++
 .../SelectionControlLabel.module.css          |  44 ++++
 .../SelectionControlLabel.test.tsx            |   6 +
 .../SelectionControlLabel.tsx                 |  43 ++++
 packages/vkui/src/components/Switch/Readme.md |  36 ++--
 .../VisuallyHidden/VisuallyHidden.tsx         |   2 +
 packages/vkui/src/index.ts                    |   2 +
 styleguide/config.js                          |   1 +
 61 files changed, 696 insertions(+), 622 deletions(-)
 delete mode 100644 packages/vkui/src/components/Checkbox/Checkbox.module.css
 create mode 100644 packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.module.css
 create mode 100644 packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx
 create mode 100644 packages/vkui/src/components/Checkbox/CheckboxSimple/CheckboxSimple.module.css
 create mode 100644 packages/vkui/src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx
 create mode 100644 packages/vkui/src/components/Radio/RadioInput/RadioInput.module.css
 create mode 100644 packages/vkui/src/components/Radio/RadioInput/RadioInput.tsx
 create mode 100644 packages/vkui/src/components/SelectionControl/Readme.md
 create mode 100644 packages/vkui/src/components/SelectionControl/SelectionControl.module.css
 create mode 100644 packages/vkui/src/components/SelectionControl/SelectionControl.test.tsx
 create mode 100644 packages/vkui/src/components/SelectionControl/SelectionControl.tsx
 create mode 100644 packages/vkui/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.module.css
 create mode 100644 packages/vkui/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.test.tsx
 create mode 100644 packages/vkui/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.tsx

diff --git a/packages/vkui/src/components/Checkbox/Checkbox.module.css b/packages/vkui/src/components/Checkbox/Checkbox.module.css
deleted file mode 100644
index 6ae36d77b8..0000000000
--- a/packages/vkui/src/components/Checkbox/Checkbox.module.css
+++ /dev/null
@@ -1,170 +0,0 @@
-.Checkbox {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding-block: 0;
-  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
-  min-inline-size: var(--vkui--size_field_height--regular);
-  min-block-size: var(--vkui--size_field_height--regular);
-  font-family: var(--vkui--font_family_base);
-}
-
-/**
- * CMP:
- * FormItem
- */
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormItem) .Checkbox {
-  inline-size: 100%;
-  box-sizing: content-box;
-  margin-block: 0;
-  margin-inline: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
-}
-
-.Checkbox__icon {
-  flex-shrink: 0;
-  margin-inline-end: 12px;
-}
-
-.Checkbox__icon--on {
-  color: var(--vkui--color_icon_accent);
-  display: none;
-}
-
-.Checkbox__icon--indeterminate {
-  color: var(--vkui--color_icon_accent);
-  display: none;
-}
-
-.Checkbox__icon--off {
-  color: var(--vkui--color_icon_tertiary);
-}
-
-.Checkbox__content {
-  flex-grow: 1;
-  color: var(--vkui--color_text_primary);
-  min-inline-size: 0; /* см. https://github.com/VKCOM/VKUI/issues/5687 */
-  word-break: break-word;
-}
-
-.Checkbox__description {
-  color: var(--vkui--color_text_secondary);
-  display: block;
-  margin-block: 2px 12px;
-}
-
-.Checkbox__title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-block-start: 12px;
-}
-
-.Checkbox__title:last-child {
-  margin-block-end: 12px;
-}
-
-.Checkbox__titleBefore {
-  min-inline-size: 0; /* см. https://github.com/VKCOM/VKUI/issues/5687 */
-}
-
-.Checkbox__titleAfter {
-  margin-inline-start: 4px;
-  flex-shrink: 0;
-  color: var(--vkui--color_icon_tertiary);
-}
-
-.Checkbox__input:checked ~ .Checkbox__icon--on {
-  display: flex;
-}
-
-.Checkbox__input:indeterminate ~ .Checkbox__icon--indeterminate,
-.Checkbox__input:checked ~ .Checkbox__icon--off {
-  display: none;
-}
-
-.Checkbox__input:indeterminate ~ .Checkbox__icon--indeterminate {
-  display: flex;
-}
-
-.Checkbox__input:indeterminate ~ .Checkbox__icon--on,
-.Checkbox__input:indeterminate ~ .Checkbox__icon--off {
-  display: none;
-}
-
-/* stylelint-disable-next-line selector-max-universal */
-.Checkbox__input[disabled] ~ * {
-  opacity: var(--vkui--opacity_disable_accessibility);
-}
-
-/**
- * simple
- */
-
-.Checkbox--simple {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  border-radius: 50%;
-  inline-size: var(--vkui--size_field_height--regular);
-  block-size: var(--vkui--size_field_height--regular);
-}
-
-.Checkbox--simple .Checkbox__content {
-  display: none;
-}
-
-.Checkbox--simple .Checkbox__icon {
-  margin: 0;
-}
-
-/**
- * sizeY COMPACT
- */
-
-.Checkbox--sizeY-compact {
-  min-inline-size: var(--vkui--size_field_height--compact);
-  min-block-size: var(--vkui--size_field_height--compact);
-}
-
-.Checkbox--sizeY-compact.Checkbox--simple {
-  inline-size: var(--vkui--size_field_height--compact);
-  block-size: var(--vkui--size_field_height--compact);
-}
-
-.Checkbox--sizeY-compact .Checkbox__title {
-  margin-block-start: 8px;
-}
-
-.Checkbox--sizeY-compact .Checkbox__title:last-child {
-  margin-block-end: 8px;
-}
-
-.Checkbox--sizeY-compact .Checkbox__description {
-  margin-block-end: 8px;
-}
-
-@media (--sizeY-compact) {
-  .Checkbox--sizeY-none {
-    min-inline-size: var(--vkui--size_field_height--compact);
-    min-block-size: var(--vkui--size_field_height--compact);
-  }
-
-  .Checkbox--sizeY-none.Checkbox--simple {
-    inline-size: var(--vkui--size_field_height--compact);
-    block-size: var(--vkui--size_field_height--compact);
-  }
-
-  .Checkbox--sizeY-none .Checkbox__title {
-    margin-block-start: 8px;
-  }
-
-  .Checkbox--sizeY-none .Checkbox__title:last-child {
-    margin-block-end: 8px;
-  }
-
-  .Checkbox--sizeY-none .Checkbox__description {
-    margin-block-end: 8px;
-  }
-}
diff --git a/packages/vkui/src/components/Checkbox/Checkbox.tsx b/packages/vkui/src/components/Checkbox/Checkbox.tsx
index f62645ca74..ec2090f3ca 100644
--- a/packages/vkui/src/components/Checkbox/Checkbox.tsx
+++ b/packages/vkui/src/components/Checkbox/Checkbox.tsx
@@ -1,127 +1,42 @@
 import * as React from 'react';
-import {
-  Icon20CheckBoxIndetermanate,
-  Icon20CheckBoxOff,
-  Icon20CheckBoxOn,
-  Icon24CheckBoxOff,
-  Icon24CheckBoxOn,
-} from '@vkontakte/icons';
-import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
-import { useExternRef } from '../../hooks/useExternRef';
-import { usePlatform } from '../../hooks/usePlatform';
-import { warnOnce } from '../../lib/warnOnce';
-import { HasRef, HasRootRef } from '../../types';
-import { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';
-import { Tappable, type TappableProps } from '../Tappable/Tappable';
-import { Footnote } from '../Typography/Footnote/Footnote';
-import { Text } from '../Typography/Text/Text';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
-import styles from './Checkbox.module.css';
-
-function setIndeterminate(el: HTMLInputElement, indeterminate: boolean) {
-  el.indeterminate = indeterminate;
-}
-
-const sizeYClassNames = {
-  none: styles['Checkbox--sizeY-none'],
-  ['compact']: styles['Checkbox--sizeY-compact'],
-};
+import { hasReactNode } from '@vkontakte/vkjs';
+import { HasRootRef } from '../../types';
+import { SelectionControl } from '../SelectionControl/SelectionControl';
+import { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';
+import { type TappableProps } from '../Tappable/Tappable';
+import { CheckboxInput, CheckboxInputProps } from './CheckboxInput/CheckboxInput';
+import { CheckboxSimple } from './CheckboxSimple/CheckboxSimple';
 
 export interface CheckboxProps
-  extends React.InputHTMLAttributes<HTMLInputElement>,
+  extends Omit<CheckboxInputProps, 'getRootRef'>,
     HasRootRef<HTMLLabelElement>,
-    HasRef<HTMLInputElement>,
     Pick<
       TappableProps,
       'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'
     > {
   description?: React.ReactNode;
-  indeterminate?: boolean;
-  defaultIndeterminate?: boolean;
   titleAfter?: React.ReactNode;
 }
 
-const warn = warnOnce('Checkbox');
-
-/**
- * @see https://vkcom.github.io/VKUI/#/Checkbox
- */
-export const Checkbox = ({
+const CheckboxComponent = ({
   children,
   className,
   style,
   getRootRef,
-  getRef,
   description,
-  indeterminate,
-  defaultIndeterminate,
   hoverMode,
   activeMode,
   hasHover,
   hasActive,
   focusVisibleMode,
-  onChange,
   titleAfter,
   ...restProps
 }: CheckboxProps): React.ReactNode => {
-  const inputRef = useExternRef(getRef);
-  const platform = usePlatform();
-  const { sizeY = 'none' } = useAdaptivity();
-  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();
-
-  React.useEffect(() => {
-    const indeterminateValue = indeterminate ?? Boolean(defaultIndeterminate);
-
-    if (inputRef.current) {
-      setIndeterminate(inputRef.current, indeterminateValue);
-    }
-  }, [defaultIndeterminate, indeterminate, inputRef]);
-
-  const handleChange: CheckboxProps['onChange'] = React.useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (
-        defaultIndeterminate !== undefined &&
-        indeterminate === undefined &&
-        restProps.checked === undefined
-      ) {
-        event.currentTarget.indeterminate = false;
-      }
-      if (indeterminate !== undefined) {
-        event.currentTarget.indeterminate = indeterminate;
-      }
-      onChange && onChange(event);
-    },
-    [defaultIndeterminate, indeterminate, restProps.checked, onChange],
-  );
-
-  if (process.env.NODE_ENV === 'development') {
-    if (defaultIndeterminate && restProps.defaultChecked) {
-      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');
-    }
-
-    if (indeterminate && restProps.checked) {
-      warn('indeterminate и checked не могут быть true одновременно', 'error');
-    }
-
-    if (restProps.defaultChecked && restProps.checked) {
-      warn('defaultChecked и checked не могут быть true одновременно', 'error');
-    }
-  }
-
   return (
-    <Tappable
-      Component="label"
-      className={classNames(
-        styles['Checkbox'],
-        sizeY !== 'regular' && sizeYClassNames[sizeY],
-        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],
-        className,
-      )}
+    <SelectionControl
+      className={className}
       style={style}
       disabled={restProps.disabled}
-      activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}
       getRootRef={getRootRef}
       hoverMode={hoverMode}
       activeMode={activeMode}
@@ -129,75 +44,24 @@ export const Checkbox = ({
       hasActive={hasActive}
       focusVisibleMode={focusVisibleMode}
     >
-      <VisuallyHidden
-        {...restProps}
-        Component="input"
-        type="checkbox"
-        onChange={handleChange}
-        className={styles['Checkbox__input']}
-        getRootRef={inputRef}
-      />
-      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>
-        {platform === 'vkcom' ? (
-          <Icon20CheckBoxOn />
-        ) : (
-          <React.Fragment>
-            {adaptiveSizeY.compact && (
-              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />
-            )}
-            {adaptiveSizeY.regular && (
-              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />
-            )}
-          </React.Fragment>
-        )}
-      </div>
-      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>
-        {platform === 'vkcom' ? (
-          <Icon20CheckBoxOff />
-        ) : (
-          <React.Fragment>
-            {adaptiveSizeY.compact && (
-              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />
-            )}
-            {adaptiveSizeY.regular && (
-              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />
-            )}
-          </React.Fragment>
-        )}
-      </div>
-      <div
-        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}
-      >
-        {platform === 'vkcom' ? (
-          <Icon20CheckBoxIndetermanate width={20} height={20} />
-        ) : (
-          <React.Fragment>
-            {adaptiveSizeY.compact && (
-              <Icon20CheckBoxIndetermanate
-                className={adaptiveSizeY.compact.className}
-                width={20}
-                height={20}
-              />
-            )}
-            {adaptiveSizeY.regular && (
-              <Icon20CheckBoxIndetermanate
-                className={adaptiveSizeY.regular.className}
-                width={24}
-                height={24}
-              />
-            )}
-          </React.Fragment>
-        )}
-      </div>
-      <div className={styles['Checkbox__content']}>
-        <div className={styles['Checkbox__title']}>
-          <Text className={styles['Checkbox__titleBefore']}>{children}</Text>
-          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>
-        </div>
-        {hasReactNode(description) && (
-          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>
-        )}
-      </div>
-    </Tappable>
+      <CheckboxInput {...restProps} />
+      <SelectionControlLabel titleAfter={titleAfter} description={description}>
+        {children}
+      </SelectionControlLabel>
+    </SelectionControl>
   );
 };
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Checkbox
+ */
+export const Checkbox = (props: CheckboxProps): React.ReactNode => {
+  const simple = !(hasReactNode(props.children) || hasReactNode(props.description));
+  if (simple) {
+    return <CheckboxSimple {...props} />;
+  }
+
+  return <CheckboxComponent {...props} />;
+};
+
+Checkbox.Input = CheckboxInput;
diff --git a/packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.module.css b/packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.module.css
new file mode 100644
index 0000000000..bd66540efa
--- /dev/null
+++ b/packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.module.css
@@ -0,0 +1,30 @@
+.CheckboxInput {
+  color: var(--vkui--color_icon_accent);
+}
+
+.CheckboxInput__icon--on,
+.CheckboxInput__icon--indeterminate {
+  display: none;
+}
+
+.CheckboxInput__icon--off {
+  color: var(--vkui--color_icon_tertiary);
+}
+
+.CheckboxInput__input:checked ~ .CheckboxInput__icon--on {
+  display: flex;
+}
+
+.CheckboxInput__input:indeterminate ~ .CheckboxInput__icon--indeterminate,
+.CheckboxInput__input:checked ~ .CheckboxInput__icon--off {
+  display: none;
+}
+
+.CheckboxInput__input:indeterminate ~ .CheckboxInput__icon--indeterminate {
+  display: flex;
+}
+
+.CheckboxInput__input:indeterminate ~ .CheckboxInput__icon--on,
+.CheckboxInput__input:indeterminate ~ .CheckboxInput__icon--off {
+  display: none;
+}
diff --git a/packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx b/packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx
new file mode 100644
index 0000000000..2784afcc53
--- /dev/null
+++ b/packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx
@@ -0,0 +1,174 @@
+import * as React from 'react';
+import {
+  Icon20CheckBoxIndetermanate,
+  Icon20CheckBoxOff,
+  Icon20CheckBoxOn,
+  Icon24CheckBoxOff,
+  Icon24CheckBoxOn,
+} from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivityConditionalRender } from '../../../hooks/useAdaptivityConditionalRender';
+import { useExternRef } from '../../../hooks/useExternRef';
+import { usePlatform } from '../../../hooks/usePlatform';
+import { warnOnce } from '../../../lib/warnOnce';
+import { HasRef, HasRootRef } from '../../../types';
+import { RootComponent } from '../../RootComponent/RootComponent';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
+import styles from './CheckboxInput.module.css';
+
+export interface CheckboxInputProps
+  extends React.ComponentProps<'input'>,
+    HasRootRef<HTMLDivElement>,
+    HasRef<HTMLInputElement> {
+  indeterminate?: boolean;
+  defaultIndeterminate?: boolean;
+}
+
+const warn = warnOnce('Checkbox');
+
+export function CheckboxInput({
+  className,
+  style,
+  getRootRef,
+  getRef,
+  indeterminate,
+  defaultIndeterminate,
+  onChange,
+  ...restProps
+}: CheckboxInputProps) {
+  const inputRef = useExternRef(getRef);
+  const platform = usePlatform();
+  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();
+
+  React.useEffect(() => {
+    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
+
+    if (inputRef.current) {
+      inputRef.current.indeterminate = Boolean(indeterminateValue);
+    }
+  }, [defaultIndeterminate, indeterminate, inputRef]);
+
+  const handleChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (
+        defaultIndeterminate !== undefined &&
+        indeterminate === undefined &&
+        restProps.checked === undefined &&
+        inputRef.current
+      ) {
+        inputRef.current.indeterminate = false;
+      }
+      if (indeterminate !== undefined && inputRef.current) {
+        inputRef.current.indeterminate = indeterminate;
+      }
+      onChange && onChange(event);
+    },
+    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],
+  );
+
+  if (process.env.NODE_ENV === 'development') {
+    if (defaultIndeterminate && restProps.defaultChecked) {
+      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');
+    }
+
+    if (indeterminate && restProps.checked) {
+      warn('indeterminate и checked не могут быть true одновременно', 'error');
+    }
+
+    if (restProps.defaultChecked && restProps.checked) {
+      warn('defaultChecked и checked не могут быть true одновременно', 'error');
+    }
+  }
+
+  return (
+    <RootComponent
+      baseClassName={styles['CheckboxInput']}
+      className={className}
+      style={style}
+      getRootRef={getRootRef}
+    >
+      <VisuallyHidden
+        {...restProps}
+        Component="input"
+        type="checkbox"
+        onChange={handleChange}
+        className={styles['CheckboxInput__input']}
+        getRootRef={inputRef}
+      />
+      {platform === 'vkcom' ? (
+        <Icon20CheckBoxOn className={styles['CheckboxInput__icon--on']} />
+      ) : (
+        <React.Fragment>
+          {adaptiveSizeY.compact && (
+            <Icon20CheckBoxOn
+              className={classNames(
+                styles['CheckboxInput__icon--on'],
+                adaptiveSizeY.compact.className,
+              )}
+            />
+          )}
+          {adaptiveSizeY.regular && (
+            <Icon24CheckBoxOn
+              className={classNames(
+                styles['CheckboxInput__icon--on'],
+                adaptiveSizeY.regular.className,
+              )}
+            />
+          )}
+        </React.Fragment>
+      )}
+      {platform === 'vkcom' ? (
+        <Icon20CheckBoxOff className={styles['CheckboxInput__icon--off']} />
+      ) : (
+        <React.Fragment>
+          {adaptiveSizeY.compact && (
+            <Icon20CheckBoxOff
+              className={classNames(
+                styles['CheckboxInput__icon--off'],
+                adaptiveSizeY.compact.className,
+              )}
+            />
+          )}
+          {adaptiveSizeY.regular && (
+            <Icon24CheckBoxOff
+              className={classNames(
+                styles['CheckboxInput__icon--off'],
+                adaptiveSizeY.regular.className,
+              )}
+            />
+          )}
+        </React.Fragment>
+      )}
+      {platform === 'vkcom' ? (
+        <Icon20CheckBoxIndetermanate
+          width={20}
+          height={20}
+          className={styles['CheckboxInput__icon--indeterminate']}
+        />
+      ) : (
+        <React.Fragment>
+          {adaptiveSizeY.compact && (
+            <Icon20CheckBoxIndetermanate
+              className={classNames(
+                styles['CheckboxInput__icon--indeterminate'],
+                adaptiveSizeY.compact.className,
+              )}
+              width={20}
+              height={20}
+            />
+          )}
+          {adaptiveSizeY.regular && (
+            <Icon20CheckBoxIndetermanate
+              className={classNames(
+                styles['CheckboxInput__icon--indeterminate'],
+                adaptiveSizeY.regular.className,
+              )}
+              width={24}
+              height={24}
+            />
+          )}
+        </React.Fragment>
+      )}
+    </RootComponent>
+  );
+}
diff --git a/packages/vkui/src/components/Checkbox/CheckboxSimple/CheckboxSimple.module.css b/packages/vkui/src/components/Checkbox/CheckboxSimple/CheckboxSimple.module.css
new file mode 100644
index 0000000000..446e2865b7
--- /dev/null
+++ b/packages/vkui/src/components/Checkbox/CheckboxSimple/CheckboxSimple.module.css
@@ -0,0 +1,28 @@
+.CheckboxSimple {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  inline-size: var(--vkui--size_field_height--regular);
+  block-size: var(--vkui--size_field_height--regular);
+}
+
+.CheckboxSimple[disabled] {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+/**
+ * sizeY COMPACT
+ */
+
+.CheckboxSimple--sizeY-compact {
+  inline-size: var(--vkui--size_field_height--compact);
+  block-size: var(--vkui--size_field_height--compact);
+}
+
+@media (--sizeY-compact) {
+  .CheckboxSimple--sizeY-none {
+    inline-size: var(--vkui--size_field_height--compact);
+    block-size: var(--vkui--size_field_height--compact);
+  }
+}
diff --git a/packages/vkui/src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx b/packages/vkui/src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx
new file mode 100644
index 0000000000..20aba94f4b
--- /dev/null
+++ b/packages/vkui/src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx
@@ -0,0 +1,49 @@
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
+import { Tappable } from '../../Tappable/Tappable';
+import { CheckboxProps } from '../Checkbox';
+import { CheckboxInput } from '../CheckboxInput/CheckboxInput';
+import styles from './CheckboxSimple.module.css';
+
+const sizeYClassNames = {
+  none: styles['CheckboxSimple--sizeY-none'],
+  compact: styles['CheckboxSimple--sizeY-compact'],
+};
+
+export function CheckboxSimple({
+  children,
+  className,
+  style,
+  getRootRef,
+  description,
+  hoverMode,
+  activeMode,
+  hasHover,
+  hasActive,
+  focusVisibleMode,
+  titleAfter,
+  ...restProps
+}: CheckboxProps) {
+  const { sizeY = 'none' } = useAdaptivity();
+
+  return (
+    <Tappable
+      className={classNames(
+        className,
+        styles['CheckboxSimple'],
+        sizeY !== 'regular' && sizeYClassNames[sizeY],
+      )}
+      style={style}
+      disabled={restProps.disabled}
+      getRootRef={getRootRef}
+      hoverMode={hoverMode}
+      activeMode={activeMode}
+      hasHover={hasHover}
+      hasActive={hasActive}
+      focusVisibleMode={focusVisibleMode}
+      Component="label"
+    >
+      <CheckboxInput {...restProps} />
+    </Tappable>
+  );
+}
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-dark-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-dark-1-snap.png
index 3d67759535..0c094e6c24 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bf9412eaf69c6bbbd9489a82bcbe328a937407651909ce0cc8e249b296133ddc
-size 152097
+oid sha256:a96176d435107365b5c25a94e701ddb4b93c12719e8bd467fa0d86a2fbfc2a5a
+size 152084
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-light-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-light-1-snap.png
index c3776f0cb7..97fe31e8ab 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7fe5b77e2d505a4996139bca40a73c37b967b3823aa5858226e6d679ba276bdc
-size 169907
+oid sha256:eb7cd6c6db7edeeb788f7a480bcdd2a5ed195f85e279714d39d3aec9aafaaa49
+size 153387
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-dark-1-snap.png
index de23f97d53..a58803b4de 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b7134c1c19428fcd2a62f299ed0ff3eeee12814c0001525016c64ef04072a8e1
-size 158917
+oid sha256:c9072ed0b634d969de16efba2197566c2ef7921b1ff0d64c04012df455cf13a1
+size 158897
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-light-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-light-1-snap.png
index 9f075ddcd4..4013925f15 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:15bc20c40fb997fed6645c7e7890cf5c394e3bc7dc3ff8fec83dc6755213486a
-size 159989
+oid sha256:b057e601d1f406d45ca471ba1b877d2dfb434ae7ce864916c37894573d1f6418
+size 159959
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-dark-1-snap.png
index bbfe54ea38..3959f0f22a 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ba95a39de910dc6c9b841b3f1d7de5dc9df470da344570e311ff79525bc4105d
-size 149292
+oid sha256:aaecf52e60ce5b3329e994fa6cca28bee11dc7f0396347d129dabe1479e2e92e
+size 149311
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-light-1-snap.png
index 52c760effb..c7d8a21afb 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9140d4ae0cad2459d30f81a72aa110f82649af7f584cd8af506579d22f635856
-size 152002
+oid sha256:cbb5e1db5cb082cfb7750904f9f3b47db19ba32ef84f9092b73b00d4f41a61f3
+size 152033
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-dark-1-snap.png
index 1a6b3945f6..373ae1f169 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:daf28b7e298e78c2f507bd8463a8f88ed3af24c2b3676114838059d56418ca2a
-size 237627
+oid sha256:da7baced08395c5106e8dea1dc114342a8d77b546677e6d64ea4f1e93c509c90
+size 237700
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-light-1-snap.png
index 15f84e0bab..c3eeea6b78 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4c459f0650b9a00c0ac00163386a0d28f43bcb2826fa537fae17651c11d8562f
-size 245575
+oid sha256:376a40f59623e460704430e42d7f5b101681208aa877d11453170f75eca2e18f
+size 245632
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-dark-1-snap.png
index 28ccc7c91f..61ad03037f 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:77e95ae8620279348097e4e88840493b2356ccd83ee990a8b937e54c641ebfcf
-size 152833
+oid sha256:21e3d24a330e720c6687347b16cfb90ede12cc17899f3963e01f22c43db41579
+size 152859
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-light-1-snap.png
index efa8944592..1df041f739 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e8351f3704f08e9b1cd368b1f99a8de5b868a8a11fc102ec1388762e2ce5c6a8
-size 154795
+oid sha256:5eae8a52ef644ceed7a4f5f8a1ed01f6ef12b3524b18a48e1fdb204f1956bf69
+size 154829
diff --git a/packages/vkui/src/components/Radio/Radio.module.css b/packages/vkui/src/components/Radio/Radio.module.css
index db58784663..80634dedf4 100644
--- a/packages/vkui/src/components/Radio/Radio.module.css
+++ b/packages/vkui/src/components/Radio/Radio.module.css
@@ -1,134 +1,3 @@
-.Radio {
-  display: block;
-  padding-block: 0;
-  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
-  font-family: var(--vkui--font_family_base);
-}
-
-/**
- * CMP:
- * FormItem
- */
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormItem) .Radio {
-  inline-size: 100%;
-  box-sizing: content-box;
-  margin-block: 0;
-  margin-inline: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
-}
-
-.Radio__container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.Radio__input:disabled ~ .Radio__container {
-  opacity: var(--vkui--opacity_disable_accessibility);
-}
-
-.Radio__icon {
-  flex-shrink: 0;
-  inline-size: 22px;
-  block-size: 22px;
-  margin-inline-end: 14px;
-  color: var(--vkui--color_icon_tertiary);
-  transition: color 0.15s var(--vkui--animation_easing_platform);
-}
-
-.Radio__input:checked ~ .Radio__container .Radio__icon {
-  color: var(--vkui--color_icon_accent);
-}
-
-.Radio__icon .Radio__pin {
-  transform-origin: 12px 12px;
-  transform: scale(0);
-  transition: transform 0.15s var(--vkui--animation_easing_platform);
-}
-
-.Radio__input:checked ~ .Radio__container .Radio__icon .Radio__pin {
-  transform: none;
-}
-
-.Radio__content {
-  display: block;
-  flex-grow: 1;
-  max-inline-size: 100%;
-  color: var(--vkui--color_text_primary);
-}
-
-.Radio__description {
-  display: block;
-  color: var(--vkui--color_text_secondary);
-  margin-block: 2px 12px;
-}
-
-.Radio__title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-block-start: 12px;
-}
-
-.Radio__title:last-child {
-  margin-block-end: 12px;
-}
-
-.Radio__titleAfter {
-  margin-inline-start: 4px;
-  color: var(--vkui--color_icon_tertiary);
-}
-
-/**
- * sizeY COMPACT
- */
-
-.Radio--sizeY-compact .Radio__title {
-  margin-block-start: 8px;
-}
-
-.Radio--sizeY-compact .Radio__title:last-child {
-  margin-block-end: 8px;
-}
-
-.Radio--sizeY-compact .Radio__description {
-  margin-block-end: 7px;
-}
-
-.Radio--sizeY-compact .Radio__icon {
-  inline-size: 18px;
-  block-size: 18px;
-}
-
-.Radio--sizeY-compact .Radio__icon::after {
-  inline-size: 12px;
-  block-size: 12px;
-}
-
-@media (--sizeY-compact) {
-  .Radio--sizeY-none .Radio__title {
-    margin-block-start: 8px;
-  }
-
-  .Radio--sizeY-none .Radio__title:last-child {
-    margin-block-end: 8px;
-  }
-
-  .Radio--sizeY-none .Radio__description {
-    margin-block-end: 7px;
-  }
-
-  .Radio--sizeY-none .Radio__icon {
-    inline-size: 18px;
-    block-size: 18px;
-  }
-
-  .Radio--sizeY-none .Radio__icon::after {
-    inline-size: 12px;
-    block-size: 12px;
-  }
-}
-
 /**
  * CMP:
  * RadioGroup
diff --git a/packages/vkui/src/components/Radio/Radio.tsx b/packages/vkui/src/components/Radio/Radio.tsx
index 2827e068b7..14c8a8b9dc 100644
--- a/packages/vkui/src/components/Radio/Radio.tsx
+++ b/packages/vkui/src/components/Radio/Radio.tsx
@@ -1,29 +1,12 @@
 import * as React from 'react';
-import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { usePlatform } from '../../hooks/usePlatform';
+import { classNames } from '@vkontakte/vkjs';
 import { HasDataAttribute, HasRef, HasRootRef } from '../../types';
-import { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';
-import { Tappable, type TappableProps } from '../Tappable/Tappable';
-import { Footnote } from '../Typography/Footnote/Footnote';
-import { Text } from '../Typography/Text/Text';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
+import { SelectionControl } from '../SelectionControl/SelectionControl';
+import { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';
+import { type TappableProps } from '../Tappable/Tappable';
+import { RadioInput } from './RadioInput/RadioInput';
 import styles from './Radio.module.css';
 
-const sizeYClassNames = {
-  none: styles['Radio--sizeY-none'],
-  ['compact']: styles['Radio--sizeY-compact'],
-};
-
-const RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden {...props}>
-      <circle cx="12" cy="12" r="11" stroke="currentColor" strokeWidth="2" fill="none" />
-      <circle cx="12" cy="12" r="7.5" className={styles['Radio__pin']} fill="currentColor" />
-    </svg>
-  );
-};
-
 export interface RadioProps
   extends React.InputHTMLAttributes<HTMLInputElement>,
     HasRef<HTMLInputElement>,
@@ -59,19 +42,10 @@ export const Radio = ({
   focusVisibleMode,
   ...restProps
 }: RadioProps): React.ReactNode => {
-  const platform = usePlatform();
-  const { sizeY = 'none' } = useAdaptivity();
-
   return (
-    <Tappable
-      Component="label"
+    <SelectionControl
       style={style}
-      className={classNames(
-        styles['Radio'],
-        sizeY !== 'regular' && sizeYClassNames[sizeY],
-        className,
-      )}
-      activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}
+      className={classNames(styles['Radio'], className)}
       disabled={restProps.disabled}
       getRootRef={getRootRef}
       hoverMode={hoverMode}
@@ -81,25 +55,12 @@ export const Radio = ({
       focusVisibleMode={focusVisibleMode}
       {...labelProps}
     >
-      <VisuallyHidden
-        {...restProps}
-        Component="input"
-        type="radio"
-        getRootRef={getRef}
-        className={styles['Radio__input']}
-      />
-      <div className={styles['Radio__container']}>
-        <RadioIcon className={styles['Radio__icon']} />
-        <div className={styles['Radio__content']}>
-          <div className={styles['Radio__title']}>
-            <Text>{children}</Text>
-            <div className={styles['Radio__titleAfter']}>{titleAfter}</div>
-          </div>
-          {hasReactNode(description) && (
-            <Footnote className={styles['Radio__description']}>{description}</Footnote>
-          )}
-        </div>
-      </div>
-    </Tappable>
+      <RadioInput {...restProps} getRef={getRef} />
+      <SelectionControlLabel titleAfter={titleAfter} description={description}>
+        {children}
+      </SelectionControlLabel>
+    </SelectionControl>
   );
 };
+
+Radio.Input = RadioInput;
diff --git a/packages/vkui/src/components/Radio/RadioInput/RadioInput.module.css b/packages/vkui/src/components/Radio/RadioInput/RadioInput.module.css
new file mode 100644
index 0000000000..be32f4916d
--- /dev/null
+++ b/packages/vkui/src/components/Radio/RadioInput/RadioInput.module.css
@@ -0,0 +1,20 @@
+.RadioInput__icon {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--vkui--color_icon_tertiary);
+  transition: color 0.15s var(--vkui--animation_easing_platform);
+}
+
+.RadioInput__input:checked ~ .RadioInput__icon {
+  color: var(--vkui--color_icon_accent);
+}
+
+.RadioInput__icon .RadioInput__pin {
+  transform-origin: center;
+  transform: scale(0);
+  transition: transform 0.15s var(--vkui--animation_easing_platform);
+}
+
+.RadioInput__input:checked ~ .RadioInput__icon .RadioInput__pin {
+  transform: none;
+}
diff --git a/packages/vkui/src/components/Radio/RadioInput/RadioInput.tsx b/packages/vkui/src/components/Radio/RadioInput/RadioInput.tsx
new file mode 100644
index 0000000000..34e4b40dbf
--- /dev/null
+++ b/packages/vkui/src/components/Radio/RadioInput/RadioInput.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../../types';
+import { AdaptiveIconRenderer } from '../../AdaptiveIconRenderer/AdaptiveIconRenderer';
+import { RootComponent } from '../../RootComponent/RootComponent';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
+import styles from './RadioInput.module.css';
+
+function RadioIcon24(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden {...props}>
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" fill="none" />
+      <circle cx="12" cy="12" r="7" className={styles['RadioInput__pin']} fill="currentColor" />
+    </svg>
+  );
+}
+
+function RadioIcon20(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden {...props}>
+      <circle cx="10" cy="10" r="7.75" stroke="currentColor" strokeWidth="1.5" fill="none" />
+      <circle cx="10" cy="10" r="5.5" className={styles['RadioInput__pin']} fill="currentColor" />
+    </svg>
+  );
+}
+
+function RadioIcon() {
+  return (
+    <div className={styles['RadioInput__icon']}>
+      <AdaptiveIconRenderer IconCompact={RadioIcon20} IconRegular={RadioIcon24} />
+    </div>
+  );
+}
+
+export interface RadioInputProps
+  extends Omit<React.ComponentProps<'input'>, 'type'>,
+    HasRootRef<HTMLLabelElement>,
+    HasRef<HTMLInputElement> {}
+
+export function RadioInput({
+  className,
+  style,
+  getRootRef,
+  getRef,
+  ...restProps
+}: RadioInputProps) {
+  return (
+    <RootComponent className={className} style={style} getRootRef={getRootRef}>
+      <VisuallyHidden
+        {...restProps}
+        Component="input"
+        type="radio"
+        baseClassName={styles['RadioInput__input']}
+        getRootRef={getRef}
+      />
+      <RadioIcon />
+    </RootComponent>
+  );
+}
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-android-chromium-dark-1-snap.png
index 9b490fb626..43d1de3388 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8c8c0b3d26fdfe053d7bd169b412d8fa93b6d653c57c918672ad0d7cea82f8c8
-size 15862
+oid sha256:8bb5d899823ef6b881d01de4a41042b8d6e5a9a7a9bbc962528af10e6b5e9a47
+size 14018
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-android-chromium-light-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-android-chromium-light-1-snap.png
index 98ba99d6d6..b5948fc98e 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e80d7a2b3d55082d7b810caf788d2e5e744bbc932e5356e723dba7a63510d93b
-size 15696
+oid sha256:c07cd5de8b88409160d06282b2cf7c62aeb5cf607c6f0d69633386b7ee128875
+size 12603
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-ios-webkit-dark-1-snap.png
index 9e1d5c13d0..42e09142e7 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9fc6b4fbccc0cb4f2660a6f80799d7965f53ecd95fcbb7ce2feb76b98f643212
-size 14234
+oid sha256:f8382502da616a1664683a818065820a167490385150018954915a60fc81d9ec
+size 14149
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-ios-webkit-light-1-snap.png
index d91edb272c..422dda3af9 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:de13fc1c715e5cf16f5479f1538798bdb8f7a684a6c394deb60826976219a339
-size 12743
+oid sha256:3112b1f7278cb38c41f9cc062d9625a10054c93edba0af6bca661c576a14ff9e
+size 12704
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-android-chromium-dark-1-snap.png
index c035b8cc44..dcee52776f 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1a61c169fb0884e675102f74ea954722b196adaa2afb2ae9818291e77edea1b8
-size 22190
+oid sha256:076852034a89a36c7b5677e73a7d60b5c6f232c109ce3add92f43216f0340522
+size 19462
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-android-chromium-light-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-android-chromium-light-1-snap.png
index d21acaa920..3e8d367802 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:85b8f1c480aa5ed756efc0bb46d91d8049df4c2907d81f3e7e881aab3e38f781
-size 22006
+oid sha256:bc33ae0020fc389c3c4206f24467b847d829860b5e3fda209f54a3d99605f278
+size 18923
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-ios-webkit-dark-1-snap.png
index 7a6260f557..f79b038225 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:86a207d25090aee539f3754dc9685413f6cd0cc5aa49c74379796b110efa6398
-size 19830
+oid sha256:b86f153cc094996f1261d959a8cfe7deff6d62bbdf02d799e47ca97c71843572
+size 19770
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-ios-webkit-light-1-snap.png
index 96b2ebbe2f..fb4867d9d0 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:72c9b00909ccd2d32ad36ad303ce275ddf76695b670522b2c6acc3d616343d00
-size 19215
+oid sha256:7edbe7c20d9c024d1115b2280f73bb3659dd1fe26fa3d5b35c6f84fc06f14be4
+size 19176
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-chromium-dark-1-snap.png
index 1a861b6799..a3ef29a6db 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d2f3e3ff15355cc17bc1735f9c7daeb6a942c33afa3f1ebfb823e2bb91cfeed5
-size 19756
+oid sha256:06b863c3126d1ee93642c612a2e48d8686299a2267d21280b7ac1949c9d43ca9
+size 17262
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-chromium-light-1-snap.png
index ac1a3a0a22..d8cd85cdf5 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d4c53cd61532291965017bc199e8e434534c431f30836c95f28479332ba0495d
-size 19860
+oid sha256:a6ca63ef2ce2f6873a619057a1ac33fc9d52038d87c788edafc6a1552ab7f3d0
+size 17642
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-firefox-dark-1-snap.png
index bf7a7f64f3..5451b77012 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:566a4ce250a0a5dbd5cfe43e9e259c77732415c2211098c654b3f60b479f1356
-size 21682
+oid sha256:a1995121859f8a8192486912b6ec5ec9b6a37f2aeeab91c0947c292b86b0e6c4
+size 21982
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-firefox-light-1-snap.png
index 0acefd809c..ad76ecd36f 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b1b88ef611036708aab454241f5af15a611687fa9f56067a6965175597c2aa8e
-size 22141
+oid sha256:7cfa239bab274b57fa6e61f6688ee45a3e56a69a94bb69bbe42f0137728f2b74
+size 22440
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-webkit-dark-1-snap.png
index 43b010886f..289485e340 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:857be470b7c22f19b8a7e35b657b6492adba02b7d8563fc1ec57bcbda0232fa1
-size 17788
+oid sha256:839fd5e37cdfe047f9c58005aeddbb9040cb6cc820d9df9e12d53032dfb1a8d7
+size 17713
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-webkit-light-1-snap.png
index 5bde5b090a..464ceb6230 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-sizes-and-description-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c13f10263e0b397b6acfb81a624eadc75c558680566c3dd252fd28ef77c5225f
-size 18140
+oid sha256:3c61c40aa5419d0ccf22d44fb4aa87313e1ae0d5d538fa60e247fe5a3b662831
+size 18152
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-chromium-dark-1-snap.png
index 3305babc66..33a10268d2 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b9c3f934e5854a9002d5929788e402904d9898624bebd0e8035eb72e19c0f23a
-size 13509
+oid sha256:dac7ea49ef1dbdad4700158b17955d1a44b21d4c3d7cfe2267fb98c24bf7293e
+size 11977
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-chromium-light-1-snap.png
index f4e07276df..3627879586 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:60d7e3886d592b9e600336d923f3ff94f4d85fb405946debef0a052ec7a072a0
-size 13472
+oid sha256:f17b01de8c83b945fcc3e2911b6ab197449c36b89774c294286deed281f14922
+size 12068
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-firefox-dark-1-snap.png
index 8287cf760a..0665ce986c 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8ea2495a96421f41cf885320e0e2aaa91d4db175851efb28103720c4aa005367
-size 15723
+oid sha256:5832f4f271b963678d1dab48db102b415b0fb7a626010001b27055c1d0cc7b2a
+size 15892
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-firefox-light-1-snap.png
index 82ed4e3220..cb00b0c5f7 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d49c28b2654af4311447bfda46186e22cdf2cb3b22b3c3cc19e5623ac7c9d86b
-size 15004
+oid sha256:3264cfb548ec47320fd08cf259deeeefb42bcf2cc729db6573e331f4a9b1a571
+size 15161
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-webkit-dark-1-snap.png
index e0cb36bfc3..64eb8a22a6 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cee3d51949ec12df85aca6446bf8a88cb961ec75cb48cb395f675024b4d85e19
-size 12176
+oid sha256:0573042fa2c2174425fc3b459a8e06d5eddd7b87cc3180ac8b29886b234cfaa6
+size 12116
diff --git a/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-webkit-light-1-snap.png
index 1576877ad4..a96b4d270f 100644
--- a/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Radio/__image_snapshots__/radio-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:782a9c3b28c5bf72c27d3764903bd461cf417e5e83e94e03f7a43f6a83a494d0
-size 12243
+oid sha256:9586cc12ec5b856ca9067acfd3ab78ae21d374bc43c514530b434749db3e4c85
+size 12259
diff --git a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-android-chromium-dark-1-snap.png b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-android-chromium-dark-1-snap.png
index ca7e39007d..333ed566e4 100644
--- a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:23591e6e569177853083868c1de736d78f5d797933bae1758438b60597ca92ad
-size 33015
+oid sha256:d14524133b78e4a5abcdcc25dfc78754afc8cc473bee22a25d61104b743db15d
+size 29332
diff --git a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-android-chromium-light-1-snap.png b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-android-chromium-light-1-snap.png
index 9177687590..205519fe77 100644
--- a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:128cdbd64223d632d0594a2e9c091101242a9e5a6a717d846c72ff4f45224f64
-size 32642
+oid sha256:6b4dc128b0f457e4237ba7234f386d8dff97862bde02c99d503995975d70c58e
+size 28437
diff --git a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-ios-webkit-dark-1-snap.png
index 7495eff890..60efa26e57 100644
--- a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2c828f4848247e8efaa6bcd5b54f9b6e5024f9dba495b8885f45ad115fdfd871
-size 29829
+oid sha256:2875ab90d56d7f7a137b57b54aa48148098e042fbb124b71b140d2768bdc854f
+size 29763
diff --git a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-ios-webkit-light-1-snap.png b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-ios-webkit-light-1-snap.png
index 38bfb721cd..fc1115dba1 100644
--- a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1cf1c1c1058a7fbc8cf34017d35f9530f2d6886284f265ae3cd1419e1400b0ab
-size 29145
+oid sha256:08057361fbbaf3bd133ddeeab2f3cd8eb1df28a75fa74da8d47af8c095b75562
+size 29086
diff --git a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-chromium-dark-1-snap.png
index 7eef308674..0b753f4a7b 100644
--- a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0181c1311bd087c3ca2462a42a83111c175f4fa3e0ceae47bb3ce532276ec1c6
-size 29027
+oid sha256:95eb856fbee3a1db38147bfd1bb0189ecff87ce040387cf181b310e9b6926b0f
+size 25738
diff --git a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-chromium-light-1-snap.png
index 6ce266445a..8f9f04b772 100644
--- a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:77210e9017c8d089aee7dce751a8f001700d586025b3c106228051926a8c07f4
-size 29016
+oid sha256:adc79f3003590c43903998580b63beedbfc1132f3707d8df54cbde77ad303b06
+size 26051
diff --git a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-firefox-dark-1-snap.png
index 381e9fc74a..7fdd03c462 100644
--- a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b62cd114cc36d14a0e52881c6c4efaa1a2c1a35897109aa6a00d370355d5328f
-size 32642
+oid sha256:74ff6556b4045fd63b7f3c44a65a8cd78ddf81e736046e26cc6f03758387ffde
+size 33492
diff --git a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-firefox-light-1-snap.png
index e0bdb83a38..5ee7e08a69 100644
--- a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:267bdd1320b3e458bcc8f641ae7dbb5ce138522f3f93679226079b595d718f93
-size 32388
+oid sha256:b7aecc24993d58622861552b7a586904787c7342e269ef28724f1ef224f0d237
+size 32916
diff --git a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-webkit-dark-1-snap.png
index c9e1195d70..5fd90c350c 100644
--- a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5a308d03df9903454c6456538d8651c8f0c388eb40d4178a0a0248b5da3a0cb5
-size 26056
+oid sha256:8e3211b4b9023070ec6ac32b2fb35c0e270346edd79a7c223d76ae58fdc34618
+size 26101
diff --git a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-webkit-light-1-snap.png
index 2ddd4c681c..01d0992af4 100644
--- a/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/RadioGroup/__image_snapshots__/radiogroup-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:da0d2c55f0d33e2ac52436a83f66bcdf6ce63f8d1201c684de2c7ea81bb5ce23
-size 26322
+oid sha256:0f63aaade1556064a1577ea1842a39b2c806b5255b6deb8148d5ce489a02f40b
+size 26452
diff --git a/packages/vkui/src/components/SelectionControl/Readme.md b/packages/vkui/src/components/SelectionControl/Readme.md
new file mode 100644
index 0000000000..2df3a6b9a7
--- /dev/null
+++ b/packages/vkui/src/components/SelectionControl/Readme.md
@@ -0,0 +1,18 @@
+Компонент для создания переключателей
+
+```jsx { "props": { "layout": false, "adaptivity": true } }
+<Group>
+  <SelectionControl>
+    <Checkbox.Input />
+    <SelectionControl.Label description="Description">Title</SelectionControl.Label>
+  </SelectionControl>
+  <SelectionControl>
+    <Radio.Input />
+    <SelectionControl.Label description="Description">Title</SelectionControl.Label>
+  </SelectionControl>
+  <SelectionControl>
+    <SelectionControl.Label description="Description">Title</SelectionControl.Label>
+    <Switch />
+  </SelectionControl>
+</Group>
+```
diff --git a/packages/vkui/src/components/SelectionControl/SelectionControl.module.css b/packages/vkui/src/components/SelectionControl/SelectionControl.module.css
new file mode 100644
index 0000000000..4063546379
--- /dev/null
+++ b/packages/vkui/src/components/SelectionControl/SelectionControl.module.css
@@ -0,0 +1,33 @@
+.SelectionControl {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
+  font-family: var(--vkui--font_family_base);
+  min-block-size: var(--vkui--size_field_height--regular);
+  box-sizing: border-box;
+}
+
+/**
+ * CMP:
+ * FormItem
+ */
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+:global(.vkuiInternalFormItem) .SelectionControl {
+  margin-block: 0;
+  margin-inline: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+}
+
+.SelectionControl[disabled] {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.SelectionControl--sizeY-compact {
+  min-block-size: var(--vkui--size_field_height--compact);
+}
+
+@media (--sizeY-compact) {
+  .SelectionControl--sizeY-none {
+    min-block-size: var(--vkui--size_field_height--compact);
+  }
+}
diff --git a/packages/vkui/src/components/SelectionControl/SelectionControl.test.tsx b/packages/vkui/src/components/SelectionControl/SelectionControl.test.tsx
new file mode 100644
index 0000000000..e1701ce48d
--- /dev/null
+++ b/packages/vkui/src/components/SelectionControl/SelectionControl.test.tsx
@@ -0,0 +1,6 @@
+import { baselineComponent } from '../../testing/utils';
+import { SelectionControl } from './SelectionControl';
+
+describe('SelectionControl', () => {
+  baselineComponent(SelectionControl);
+});
diff --git a/packages/vkui/src/components/SelectionControl/SelectionControl.tsx b/packages/vkui/src/components/SelectionControl/SelectionControl.tsx
new file mode 100644
index 0000000000..9236067ef7
--- /dev/null
+++ b/packages/vkui/src/components/SelectionControl/SelectionControl.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { usePlatform } from '../../hooks/usePlatform';
+import { HasRootRef } from '../../types';
+import { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';
+import { Tappable, type TappableProps } from '../Tappable/Tappable';
+import { SelectionControlLabel } from './SelectionControlLabel/SelectionControlLabel';
+import styles from './SelectionControl.module.css';
+
+const sizeYClassNames = {
+  none: styles['SelectionControl--sizeY-none'],
+  compact: styles['SelectionControl--sizeY-compact'],
+};
+
+export interface SelectionControlProps
+  extends React.ComponentProps<'label'>,
+    HasRootRef<HTMLLabelElement>,
+    Pick<
+      TappableProps,
+      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode' | 'disabled'
+    > {}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/SelectionControl
+ */
+export const SelectionControl = (restProps: SelectionControlProps): React.ReactNode => {
+  const { sizeY = 'none' } = useAdaptivity();
+  const platform = usePlatform();
+
+  return (
+    <Tappable
+      Component="label"
+      baseClassName={classNames(
+        styles['SelectionControl'],
+        sizeY !== 'regular' && sizeYClassNames[sizeY],
+      )}
+      activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}
+      {...restProps}
+    />
+  );
+};
+
+SelectionControl.Label = SelectionControlLabel;
diff --git a/packages/vkui/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.module.css b/packages/vkui/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.module.css
new file mode 100644
index 0000000000..4b597abe7e
--- /dev/null
+++ b/packages/vkui/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.module.css
@@ -0,0 +1,44 @@
+.SelectionControlLabel {
+  flex-grow: 1;
+  color: var(--vkui--color_text_primary);
+  min-inline-size: 0; /* см. https://github.com/VKCOM/VKUI/issues/5687 */
+  word-break: break-word;
+  margin-block: var(--vkui--spacing_size_xl);
+  margin-inline-start: 12px;
+}
+
+.SelectionControlLabel:first-child {
+  margin-inline-start: 0;
+}
+
+.SelectionControlLabel__description {
+  color: var(--vkui--color_text_secondary);
+  display: block;
+  margin-block-start: 2px;
+}
+
+.SelectionControlLabel__titleLayout {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.SelectionControlLabel__title {
+  min-inline-size: 0; /* см. https://github.com/VKCOM/VKUI/issues/5687 */
+}
+
+.SelectionControlLabel__titleAfter {
+  margin-inline-start: 4px;
+  flex-shrink: 0;
+  color: var(--vkui--color_icon_tertiary);
+}
+
+.SelectionControlLabel--sizeY-compact {
+  margin-block: var(--vkui--spacing_size_m);
+}
+
+@media (--sizeY-compact) {
+  .SelectionControlLabel--sizeY-none {
+    margin-block: var(--vkui--spacing_size_m);
+  }
+}
diff --git a/packages/vkui/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.test.tsx b/packages/vkui/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.test.tsx
new file mode 100644
index 0000000000..dd59254f09
--- /dev/null
+++ b/packages/vkui/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.test.tsx
@@ -0,0 +1,6 @@
+import { baselineComponent } from '../../../testing/utils';
+import { SelectionControlLabel } from './SelectionControlLabel';
+
+describe('SelectionControlLabel', () => {
+  baselineComponent(SelectionControlLabel);
+});
diff --git a/packages/vkui/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.tsx b/packages/vkui/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.tsx
new file mode 100644
index 0000000000..8cf0f90041
--- /dev/null
+++ b/packages/vkui/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.tsx
@@ -0,0 +1,43 @@
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
+import { RootComponent } from '../../RootComponent/RootComponent';
+import { Footnote } from '../../Typography/Footnote/Footnote';
+import { Text } from '../../Typography/Text/Text';
+import styles from './SelectionControlLabel.module.css';
+
+const sizeYClassNames = {
+  none: styles['SelectionControlLabel--sizeY-none'],
+  compact: styles['SelectionControlLabel--sizeY-compact'],
+};
+
+interface SelectionControlLabelProps extends React.ComponentProps<'div'> {
+  description?: React.ReactNode;
+  titleAfter?: React.ReactNode;
+}
+
+export function SelectionControlLabel({
+  children,
+  titleAfter,
+  description,
+  ...restProps
+}: SelectionControlLabelProps) {
+  const { sizeY = 'none' } = useAdaptivity();
+
+  return (
+    <RootComponent
+      baseClassName={classNames(
+        styles['SelectionControlLabel'],
+        sizeY !== 'regular' && sizeYClassNames[sizeY],
+      )}
+      {...restProps}
+    >
+      <div className={styles['SelectionControlLabel__titleLayout']}>
+        <Text className={styles['SelectionControlLabel__title']}>{children}</Text>
+        <div className={styles['SelectionControlLabel__titleAfter']}>{titleAfter}</div>
+      </div>
+      {hasReactNode(description) && (
+        <Footnote className={styles['SelectionControlLabel__description']}>{description}</Footnote>
+      )}
+    </RootComponent>
+  );
+}
diff --git a/packages/vkui/src/components/Switch/Readme.md b/packages/vkui/src/components/Switch/Readme.md
index 6425360b77..f2351ade35 100644
--- a/packages/vkui/src/components/Switch/Readme.md
+++ b/packages/vkui/src/components/Switch/Readme.md
@@ -5,28 +5,20 @@
   <Panel id="switch">
     <PanelHeader>Switch</PanelHeader>
     <Group>
-      <SimpleCell Component="label" after={<Switch />}>
-        Комментарии к записям
-      </SimpleCell>
-      <SimpleCell Component="label" after={<Switch defaultChecked />}>
-        Ссылки
-      </SimpleCell>
-      <SimpleCell Component="label" disabled after={<Switch disabled />}>
-        Фотоальбомы
-      </SimpleCell>
-    </Group>
-    <Group header={<Header mode="secondary">Компактный вид</Header>}>
-      <AdaptivityProvider sizeY="compact">
-        <SimpleCell Component="label" after={<Switch />}>
-          Комментарии к записям
-        </SimpleCell>
-        <SimpleCell Component="label" after={<Switch defaultChecked />}>
-          Ссылки
-        </SimpleCell>
-        <SimpleCell Component="label" disabled after={<Switch disabled />}>
-          Фотоальбомы
-        </SimpleCell>
-      </AdaptivityProvider>
+      <SelectionControl>
+        <SelectionControl.Label>Комментарии к записям</SelectionControl.Label>
+        <Switch />
+      </SelectionControl>
+
+      <SelectionControl>
+        <SelectionControl.Label>Ссылки</SelectionControl.Label>
+        <Switch defaultChecked />
+      </SelectionControl>
+
+      <SelectionControl disabled>
+        <SelectionControl.Label>Фотоальбомы</SelectionControl.Label>
+        <Switch disabled />
+      </SelectionControl>
     </Group>
   </Panel>
 </View>
diff --git a/packages/vkui/src/components/VisuallyHidden/VisuallyHidden.tsx b/packages/vkui/src/components/VisuallyHidden/VisuallyHidden.tsx
index 9a4ba20e86..7e5165103b 100644
--- a/packages/vkui/src/components/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/vkui/src/components/VisuallyHidden/VisuallyHidden.tsx
@@ -13,12 +13,14 @@ export type VisuallyHiddenProps<T> = RootComponentProps<T>;
  */
 export const VisuallyHidden = <T,>({
   Component = 'span',
+  baseClassName,
   ...restProps
 }: VisuallyHiddenProps<T>): React.ReactNode => (
   <RootComponent
     Component={Component}
     {...restProps}
     baseClassName={classNames(
+      baseClassName,
       styles['VisuallyHidden'],
       Component === 'input' && styles['VisuallyHidden--focusable-input'],
     )}
diff --git a/packages/vkui/src/index.ts b/packages/vkui/src/index.ts
index 89c31d0736..137ebad377 100644
--- a/packages/vkui/src/index.ts
+++ b/packages/vkui/src/index.ts
@@ -299,6 +299,8 @@ export { Slider } from './components/Slider/Slider';
 export type { SliderBaseProps, SliderProps, SliderMultipleProps } from './components/Slider/Slider';
 export { Textarea } from './components/Textarea/Textarea';
 export type { TextareaProps } from './components/Textarea/Textarea';
+export { SelectionControl } from './components/SelectionControl/SelectionControl';
+export type { SelectionControlProps } from './components/SelectionControl/SelectionControl';
 export { Radio } from './components/Radio/Radio';
 export type { RadioProps } from './components/Radio/Radio';
 export { RadioGroup } from './components/RadioGroup/RadioGroup';
diff --git a/styleguide/config.js b/styleguide/config.js
index 9bf04a4ba4..19771bd671 100644
--- a/styleguide/config.js
+++ b/styleguide/config.js
@@ -276,6 +276,7 @@ const baseConfig = {
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/FormField/FormField.tsx`,
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/FormStatus/FormStatus.tsx`,
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/Slider/Slider.tsx`,
+            `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/SelectionControl/SelectionControl.tsx`,
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/Radio/Radio.tsx`,
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/RadioGroup/RadioGroup.tsx`,
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/Checkbox/Checkbox.tsx`,