Murasaki
Components

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Default
Comfortable
Compact

Usage

import { Label, RadioGroup, RadioGroupItem } from "@murasakijs/ui";
<RadioGroup defaultValue="comfortable">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="comfortable" id="r1" />
    <Label htmlFor="r1">Comfortable</Label>
  </div>
</RadioGroup>

API Reference

RadioGroup

PropTypeDefault
valuestring
defaultValuestring
onValueChange(value: string) => void
disabledbooleanfalse
namestring
requiredbooleanfalse

RadioGroupItem

PropTypeDefault
valuestring— (required)
disabledbooleanfalse

Both use React Aria's radio-group state, keyboard navigation, and labeling semantics while preserving value / onValueChange.

Improve this page on GitHub

On this page