Skip to content

feat(Checkbox, Radio): add validation state #2445

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(Checkbox, Radio): add validation state #2445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
51d255a
feat(Checkbox, Radio): add validation state
PahaN47 Oct 2, 2025
c128802
chore: fix tests
PahaN47 Oct 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 40 additions & 4 deletions src/components/Checkbox/Checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ $block: '.#{variables.$ns}checkbox';
justify-content: center;

pointer-events: none;
visibility: hidden;
color: transparent;
opacity: 0;
color: var(--g-color-text-brand-contrast);
transform: translateY(-5px);
transition:
color 0.1s,
opacity 0.1s,
transform 0.2s;
}

Expand Down Expand Up @@ -143,7 +143,7 @@ $block: '.#{variables.$ns}checkbox';

#{$block}__icon {
visibility: visible;
color: var(--g-color-text-brand-contrast);
opacity: 1;
transform: translateX(0);
}
}
Expand All @@ -163,4 +163,40 @@ $block: '.#{variables.$ns}checkbox';
}
}
}

&_invalid {
#{$block}__indicator {
&::before {
border: 1px solid var(--g-color-line-danger);
}
}

#{$block}__icon {
color: var(--g-color-base-background);
}

&:hover {
#{$block}__indicator {
&::before {
border: 1px solid var(--g-color-line-danger);
}
}
}

&#{$block}_checked,
&#{$block}_indeterminate {
#{$block}__indicator {
&::before {
background-color: var(--g-color-line-danger);
border: transparent;
}
}
}

&#{$block}_disabled {
#{$block}__icon {
color: var(--g-color-base-generic-accent-disabled-solid);
}
}
}
}
6 changes: 4 additions & 2 deletions src/components/Checkbox/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import * as React from 'react';

import {useCheckbox} from '../../hooks/private';
import {ControlLabel} from '../ControlLabel';
import type {ControlProps, DOMProps, QAProps} from '../types';
import type {ControlProps, ControlValidationProps, DOMProps, QAProps} from '../types';
import {block} from '../utils/cn';

import {CheckboxDashIcon} from './CheckboxDashIcon';
Expand All @@ -14,7 +14,7 @@ import './Checkbox.scss';

export type CheckboxSize = 'm' | 'l' | 'xl';

export interface CheckboxProps extends ControlProps, DOMProps, QAProps {
export interface CheckboxProps extends ControlProps, ControlValidationProps, DOMProps, QAProps {
size?: CheckboxSize;
content?: React.ReactNode;
children?: React.ReactNode;
Expand All @@ -29,6 +29,7 @@ export const Checkbox = React.forwardRef<HTMLLabelElement, CheckboxProps>(
size = 'm',
indeterminate,
disabled = false,
validationState,
content,
children,
title,
Expand Down Expand Up @@ -66,6 +67,7 @@ export const Checkbox = React.forwardRef<HTMLLabelElement, CheckboxProps>(
disabled,
indeterminate,
checked,
invalid: validationState === 'invalid',
},
className,
)}
Expand Down
45 changes: 23 additions & 22 deletions src/components/Checkbox/README-ru.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,25 +136,26 @@ LANDING_BLOCK-->

## Свойства

| Имя | Описание | Тип | Значение по умолчанию |
| :------------- | :---------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------: | :-------------------: |
| children | Содержимое чекбокса (как правило, лейбл). | `ReactNode` | |
| content | Содержимое чекбокса (альтернатива `children`). | `ReactNode` | |
| disabled | Включает или отключает состояние `disabled` у чекбокса. | `boolean` | `false` |
| checked | Включает или отключает состояние `checked` у чекбокса. | `boolean` | `false` |
| defaultChecked | Задает начальное состояние `checked` при монтировании компонента. | `boolean` | `false` |
| onUpdate | Срабатывает при изменении состояния чекбокса пользователем и передает значение `checked` как аргумент обратного вызова. | `(checked: boolean) => void` | |
| onChange | Срабатывает при изменении состояния чекбокса пользователем и передает событие изменения как аргумент обратного вызова. | `Function` | |
| onFocus | Обработчик события, вызываемый, когда элемент ввода чекбокса получает фокус. | `Function` | |
| onBlur | Обработчик события, вызываемый, когда элемент ввода чекбокса теряет фокус. | `Function` | |
| size | Определяет размер чекбокса. | `m` `l` | `m` |
| id | HTML-атрибут `id`. | `string` | |
| qa | HTML-атрибут `data-qa`, используется для тестирования. | `string` | |
| style | HTML-атрибут `style`. | `React.CSSProperties` | |
| className | HTML-атрибут `class`. | `string` | |
| title | HTML-атрибут `title`. | `string` | |
| name | HTML-атрибут `name` для элемента ввода. | `string` | |
| value | HTML-атрибут `value` для элемента ввода. | `string` | |
| indeterminate | Включает или отключает состояние `indeterminate` у чекбокса. | `boolean` | `false` |
| controlProps | Дополнительные свойства базового элемента ввода. | `React.InputHTMLAttributes<HTMLInputElement>` | |
| controlRef | Ссылка на базовый элемент ввода. | `React.Ref<HTMLInputElement>` | |
| Имя | Описание | Тип | Значение по умолчанию |
| :-------------- | :---------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------: | :-------------------: |
| children | Содержимое чекбокса (как правило, лейбл). | `ReactNode` | |
| content | Содержимое чекбокса (альтернатива `children`). | `ReactNode` | |
| disabled | Включает или отключает состояние `disabled` у чекбокса. | `boolean` | `false` |
| validationState | Состояние валидации. | `"invalid"` | |
| checked | Включает или отключает состояние `checked` у чекбокса. | `boolean` | `false` |
| defaultChecked | Задает начальное состояние `checked` при монтировании компонента. | `boolean` | `false` |
| onUpdate | Срабатывает при изменении состояния чекбокса пользователем и передает значение `checked` как аргумент обратного вызова. | `(checked: boolean) => void` | |
| onChange | Срабатывает при изменении состояния чекбокса пользователем и передает событие изменения как аргумент обратного вызова. | `Function` | |
| onFocus | Обработчик события, вызываемый, когда элемент ввода чекбокса получает фокус. | `Function` | |
| onBlur | Обработчик события, вызываемый, когда элемент ввода чекбокса теряет фокус. | `Function` | |
| size | Определяет размер чекбокса. | `m` `l` | `m` |
| id | HTML-атрибут `id`. | `string` | |
| qa | HTML-атрибут `data-qa`, используется для тестирования. | `string` | |
| style | HTML-атрибут `style`. | `React.CSSProperties` | |
| className | HTML-атрибут `class`. | `string` | |
| title | HTML-атрибут `title`. | `string` | |
| name | HTML-атрибут `name` для элемента ввода. | `string` | |
| value | HTML-атрибут `value` для элемента ввода. | `string` | |
| indeterminate | Включает или отключает состояние `indeterminate` у чекбокса. | `boolean` | `false` |
| controlProps | Дополнительные свойства базового элемента ввода. | `React.InputHTMLAttributes<HTMLInputElement>` | |
| controlRef | Ссылка на базовый элемент ввода. | `React.Ref<HTMLInputElement>` | |
Loading
Loading