RadioGroup

PreviousNext

Classic radio group (circle radios) with layout options.

import { RadioGroup, Radio, ControlLabel } from "@/rl-ui";

<RadioGroup defaultValue="email" layout="vertical">
<ControlLabel label="Email" control={<Radio value="email" />} />
<ControlLabel label="SMS" control={<Radio value="sms" />} />
<ControlLabel label="Push" control={<Radio value="push" />} />
</RadioGroup>

Examples

Horizontal layout

import { RadioGroup, Radio, ControlLabel } from "@/rl-ui";

<RadioGroup defaultValue="a" layout="horizontal">
<ControlLabel label="Option A" control={<Radio value="a" />} />
<ControlLabel label="Option B" control={<Radio value="b" />} />
<ControlLabel label="Option C" control={<Radio value="c" />} />
</RadioGroup>

API

PropTypeDefaultDescription
layout"vertical" | "horizontal""vertical"Item arrangement.
valuestring—Controlled value.
defaultValuestring—Uncontrolled initial value.
onValueChange(value: string) => void—Change handler.
disabledbooleanfalseDisable the group.