Radio Group
Enable users to make single selections from a list of options using rothko ui's Radio component. Present a set of exclusive choices in a visually appealing and accessible manner, enhancing the usability and clarity of your forms.
Import
- Global
- Single
import { RadioGroup } from '@rothko-ui/react';
Usage
- Example
- Code
One
Two
Three
Disabled
- Example
- Code
One
Two
Three
Max Column
- Example
- Code
One
Two
Three
Props
RadioGroup Props
| Name | Type | Default | Description |
|---|---|---|---|
Name className | Type CSSProperties | Default | Description CSS class name(s). |
Name classNames | Type Object<StyleableComponents, string> | Default | Description Additional class names for the radio group components. |
Name columnGap | Type string | number | Default '0.5rem' | Description The gap between columns in the radio group. |
Name disabled | Type boolean | Default | Description Specifies whether the radio group is disabled. |
Name error | Type boolean | Default | Description Specifies whether the radio group has an error state. |
Name errorText | Type string | Default 'Invalid' | Description The error message to be displayed when the radio group has an error state. |
Name kind | Type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | Default | Description The radio group's semantic style. |
Name label | Type string | Default | Description The label for the radio group. |
Name maxCol | Type number | Default 4 | Description The maximum number of columns in the radio group. |
Name onChange | Type ($key: K) => void | Default | Description The callback function called when the value of the radio group changes. |
Name required | Type boolean | Default | Description Specifies whether the radio group is required. |
Name rowGap | Type string | number | Default '0.5rem' | Description The gap between rows in the radio group. |
Name style | Type CSSProperties | Default | Description The inline style for the radio group. |
Name styles | Type Object<StyleableComponents, CSSProperties> | Default | Description Additional inline styles for the radio group components. |
Name value | Type K | null | Default | Description The current value of the radio group. |
Radio Props
| Name | Type | Default | Description |
|---|---|---|---|
Name $key | Type string | Default | Description The key of the radio. |
Name className | Type CSSProperties | Default | Description CSS class name(s). |
Name style | Type CSSProperties | Default | Description The inline style for the radio group. |