InlineRadio
Компактный вариант радио-кнопки.
Для нескольких взаимно исключающих вариантов используйте InlineRadioGroup. rounded делает вариант «пилюлей», badge добавляет бейдж, leftIcon и rightIcon — иконки. Вариант доступен с клавиатуры.
Живой пример
Настройки примера
Использование
import { InlineRadio } from '@prosazhin/pbcomponents';
<InlineRadio value='design'>Design</InlineRadio>;API компонента
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
children | string | Содержимое компонента. | — |
size | 's' | 'm's · m | Размер компонента. | m |
checked | boolean | Текущее выбранное состояние. | false |
disabled | boolean | Блокирует взаимодействие. | false |
rounded | boolean | Скруглённая форма «пилюли». | false |
indicator | boolean | Подсветка выбранного варианта. | true |
badge | ReactElement<BadgeProps> | Бейдж справа от подписи. | — |
leftIcon | SvgTypenone · check · search · user | Иконка перед текстом; принимает SVG-компонент. | — |
rightIcon | SvgTypenone · check · search · user | Иконка после текста; принимает SVG-компонент. | — |
leftIconClassName | string | Класс левой иконки. | — |
rightIconClassName | string | Класс правой иконки. | — |
value | string | Значение варианта выбора. | — |
name | string | Имя нативной radio-группы. | — |
onChange | (checked: boolean, value: string, event: InputEvent) => void | Сообщает новое состояние и значение пункта. | — |
className | string | Класс корневого элемента. | — |
textClassName | string | Класс текстовой части. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.