Radio Group

A set of checkable radio buttons where only one can be selected at a time. Built on Radix UI RadioGroup for keyboard navigation and accessibility.

Preview

Room Type

₹499/night
₹549/night
₹1,299/night
₹1,999/night

Usage

tsx
import { RadioGroup, RadioGroupItem } from "zostel-ui";
import { Label } from "zostel-ui";

<RadioGroup defaultValue="mixed-dorm" onValueChange={setValue}>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="mixed-dorm" id="mixed" />
    <Label htmlFor="mixed">Mixed Dorm</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="private-room" id="private" />
    <Label htmlFor="private">Private Room</Label>
  </div>
</RadioGroup>

Props

value
Type: string
Default: —

The controlled value of the selected radio item.

defaultValue
Type: string
Default: —

The default value when uncontrolled.

onValueChange
Type: (value: string) => void
Default: —

Called when the selected value changes.

disabled
Type: boolean
Default: false

Disables all radio items in the group.

orientation
Type: "horizontal" | "vertical"
Default: "vertical"

The orientation of the radio group for keyboard navigation.
Previous Checkbox Next Switch