diff --git a/packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx b/packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx index b12851331e..0abca315ba 100644 --- a/packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx +++ b/packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx @@ -16,6 +16,12 @@ import { RootComponent } from '../../RootComponent/RootComponent'; import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden'; import styles from './CheckboxInput.module.css'; +type VendorIconType = typeof Icon20CheckBoxOn; + +export type CheckboxInputIconType = + | React.ComponentType> + | VendorIconType; + function setIndeterminate(el: HTMLInputElement, indeterminate: boolean) { el.indeterminate = indeterminate; } @@ -26,6 +32,11 @@ export interface CheckboxInputProps HasRef { indeterminate?: boolean; defaultIndeterminate?: boolean; + IconOnCompact?: CheckboxInputIconType; + IconOnRegular?: CheckboxInputIconType; + IconOffCompact?: CheckboxInputIconType; + IconOffRegular?: CheckboxInputIconType; + IconIndeterminate?: CheckboxInputIconType; } const warn = warnOnce('Checkbox'); @@ -38,6 +49,11 @@ export function CheckboxInput({ indeterminate, defaultIndeterminate, onChange, + IconOnCompact = Icon20CheckBoxOn, + IconOnRegular = Icon24CheckBoxOn, + IconOffCompact = Icon20CheckBoxOff, + IconOffRegular = Icon24CheckBoxOff, + IconIndeterminate = Icon20CheckBoxIndetermanate, ...restProps }: CheckboxInputProps) { const inputRef = useExternRef(getRef); @@ -100,11 +116,11 @@ export function CheckboxInput({ getRootRef={inputRef} /> {platform === 'vkcom' ? ( - + ) : ( {adaptiveSizeY.compact && ( - )} {adaptiveSizeY.regular && ( - )} {platform === 'vkcom' ? ( - + ) : ( {adaptiveSizeY.compact && ( - )} {adaptiveSizeY.regular && ( - )} {platform === 'vkcom' ? ( - {adaptiveSizeY.compact && ( - )} {adaptiveSizeY.regular && ( -