Forms Radio Group

Radio Group

Pick exactly one — a room, a date, a way to pay (Radix Radio Group).

Preview

Room

Mixed dorm

Sleeps 6

Female dorm

Sleeps 4

Private room

Sleeps 2

Usage

tsx

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

<RadioGroup defaultValue="mixed-dorm" aria-label="Room">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="mixed-dorm" id="mixed-dorm" aria-labelledby="mixed-dorm-label" />
    <Label id="mixed-dorm-label" htmlFor="mixed-dorm">Mixed dorm</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="private-room" id="private-room" aria-labelledby="private-room-label" />
    <Label id="private-room-label" htmlFor="private-room">Private room</Label>
  </div>
</RadioGroup>

RadioGroup

Prop	Type	Default	Description
`value / defaultValue`	`string`	—	The chosen item.
`onValueChange`	`(value: string) => void`	—	Called with the new value.
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	Which arrow keys move between items. On a touch screen the rows sit 44 px apart and each item’s target is 44 px.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

value / defaultValue

Type: string

Default: —

The chosen item.

onValueChange

Type: (value: string) => void

Default: —

Called with the new value.

orientation

Type: "horizontal" | "vertical"

Default: "vertical"

Which arrow keys move between items. On a touch screen the rows sit 44 px apart and each item’s target is 44 px.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).

RadioGroupItem

Prop	Type	Default	Description
`value`	`string`	—	Required.
`id · aria-label · aria-labelledby`	`string`	—	Its name, required: an id that a <Label htmlFor> points at, aria-labelledby (the id of the words beside it) or aria-label. A <label> alone names it in browsers, but axe doesn’t count a label for these button-based controls: pair htmlFor (a click on the words reaches it) with aria-labelledby, as the preview does. In a form, FormControl does both with FormLabel. In development, one that renders with no name warns in the console.
`disabled`	`boolean`	`false`	Can’t be picked.

value

Type: string

Default: —

Required.

id · aria-label · aria-labelledby

Type: string

Default: —

Its name, required: an id that a <Label htmlFor> points at, aria-labelledby (the id of the words beside it) or aria-label. A <label> alone names it in browsers, but axe doesn’t count a label for these button-based controls: pair htmlFor (a click on the words reaches it) with aria-labelledby, as the preview does. In a form, FormControl does both with FormLabel. In development, one that renders with no name warns in the console.

disabled

Type: boolean

Default: false

Can’t be picked.