InlineRadio
A compact radio option.
Use InlineRadioGroup for several mutually exclusive options. rounded makes it a pill, badge adds a badge, and leftIcon and rightIcon add icons. The option is keyboard accessible.
Live example
Example controls
Usage
import { InlineRadio } from '@prosazhin/pbcomponents';
<InlineRadio value='design'>Design</InlineRadio>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
children | string | Component content. | — |
size | 's' | 'm's · m | Component size. | m |
checked | boolean | Current selected state. | false |
disabled | boolean | Disables interaction. | false |
rounded | boolean | Rounded pill shape. | false |
indicator | boolean | Highlight of the selected choice. | true |
badge | ReactElement<BadgeProps> | Badge to the right of the label. | — |
leftIcon | SvgTypenone · check · search · user | Icon before the text; accepts an SVG component. | — |
rightIcon | SvgTypenone · check · search · user | Icon after the text; accepts an SVG component. | — |
leftIconClassName | string | Class of the left icon. | — |
rightIconClassName | string | Class of the right icon. | — |
value | string | Choice value. | — |
name | string | Native radio group name. | — |
onChange | (checked: boolean, value: string, event: InputEvent) => void | Reports the new checked state and item value. | — |
className | string | Class of the root element. | — |
textClassName | string | Class of the text part. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.