RadioButtonGroup

PreviousNext

Segmented radio buttons for a few options.

import { RadioButtonGroup, RadioButton } from "@/rl-ui";

<RadioButtonGroup defaultValue="remote">
<RadioButton value="remote">Remote</RadioButton>
<RadioButton value="onsite">On-site</RadioButton>
</RadioButtonGroup>

Examples

Sizes

import { RadioButtonGroup, RadioButton } from "@/rl-ui";

<>
<RadioButtonGroup size="small" defaultValue="a">
  <RadioButton value="a">Small</RadioButton>
  <RadioButton value="b">Alt</RadioButton>
</RadioButtonGroup>
<RadioButtonGroup size="large" defaultValue="a">
  <RadioButton value="a">Large</RadioButton>
  <RadioButton value="b">Alt</RadioButton>
</RadioButtonGroup>
</>

Block (full width)

import { RadioButtonGroup, RadioButton } from "@/rl-ui";

<RadioButtonGroup block defaultValue="week">
<RadioButton value="day">Day</RadioButton>
<RadioButton value="week">Week</RadioButton>
<RadioButton value="month">Month</RadioButton>
</RadioButtonGroup>

API

PropTypeDefaultDescription
size"small" | "medium" | "large""medium"Button height.
blockbooleanfalseStretch to full width.
columnsnumber—Grid column count when wrapping.
defaultValuestring—Uncontrolled initial value.
valuestring—Controlled value.
onValueChange(value: string) => void—Change handler.
disabledbooleanfalseDisable the group.