CheckboxGroup
Группа флажков с массивом выбранных значений.
Дочерние элементы — Checkbox или Toggle; onChange возвращает массив value. label, description и errorMessage добавляют заголовок группы, пояснение и текст ошибки. Собственные disabled, size и name пунктов сохраняются.
Живой пример
Настройки примера
Использование
import { Checkbox, CheckboxGroup } from '@prosazhin/pbcomponents';
<CheckboxGroup
label='Options'
defaultValue={['One']}
>
{['One', 'Two', 'Three', 'Four', 'Five'].map((item) => (
<Checkbox
key={item}
value={item}
>
{item}
</Checkbox>
))}
</CheckboxGroup>;API компонента
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
children | Checkbox[] | Toggle[] | Пункты группы; можно сочетать Checkbox и Toggle. Собственные disabled, size и name пунктов сохраняются. | — |
size | 's' | 'm's · m | Размер компонента. | — |
label | ReactNode | Заголовок группы (legend). | — |
description | ReactNode | Пояснение под заголовком группы. | — |
errorMessage | ReactNode | Текст ошибки под группой; связывается с группой через aria-describedby. | — |
name | string | Общее имя нативных полей группы. | — |
disabled | boolean | Блокирует взаимодействие. | false |
value | string[] | Выбранные значения. | — |
defaultValue | string[] | Начальное значение без внешнего управления. | [] |
onChange | (values: string[]) => void | Сообщает массив выбранных значений. | — |
className | string | Класс корневого элемента. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.