Radio Group

A set of mutually exclusive options. Fully accessible, keyboard-navigable, and styled to match the bloom palette.

Calm

Focused

Energized

Installation

npm install @bloomkit/react

Usage

import { RadioGroup, RadioGroupItem } from "@bloomkit/react";
 
<RadioGroup defaultValue="calm">
  <RadioGroupItem value="calm" label="Calm" />
  <RadioGroupItem value="focused" label="Focused" />
  <RadioGroupItem value="energized" label="Energized" />
</RadioGroup>

Controlled

const [value, setValue] = useState("calm");
 
<RadioGroup value={value} onValueChange={setValue}>
  <RadioGroupItem value="calm" label="Calm" />
  <RadioGroupItem value="focused" label="Focused" />
  <RadioGroupItem value="energized" label="Energized" />
</RadioGroup>

Without labels

<RadioGroup defaultValue="a">
  <RadioGroupItem value="a" aria-label="Option A" />
  <RadioGroupItem value="b" aria-label="Option B" />
</RadioGroup>

Props

RadioGroup

Prop	Type	Default	Description
value	string	—	Controlled selected value
defaultValue	string	—	Initial selected value (uncontrolled)
onValueChange	(value: string) => void	—	Called when the selected value changes
disabled	boolean	false	Disables all items in the group
className	string	""	Additional Tailwind classes

RadioGroupItem

Prop	Type	Default	Description
value	string	—	The value this item represents
label	string	—	Text label rendered beside the radio button
disabled	boolean	false	Disables this item independently
className	string	""	Additional Tailwind classes

PreviousProgressComponents

NextSelectComponents