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.

View Source

Import

Global
Single

import { RadioGroup } from '@rothko-ui/react';

Usage

Example
Code

Radio Group

One

Two

Three

Disabled

Example
Code

Radio Group

One

Two

Three

Max Column

Example
Code

Radio Group

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.