RadioGroup

Group of mutually exclusive radio button options with accessible keyboard navigation.

Examples

Radio buttons with descriptions.

Meridian

Neutral, precise, minimal

Volta

Bold, confident, rounded

Obsidian

Dark-first, high contrast

Radio buttons in a horizontal layout.

Option A

Option B

Radio buttons styled as selectable cards.

Free

$0/mo

Pro

$29/mo

Team

$79/mo

Each radio option has a supporting description.

Default

System default spacing and density.

Comfortable

More spacing between elements.

Compact

Tighter spacing for dense interfaces.

Radio group with error state.

Option A

Option B

Option C

Please select an option.

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

import { RadioGroup } from "@rokle/components";

import { RadioGroup } from "@rokle/components";

export function Example() {
  return <RadioGroup />;
}

Prop	Type	Default	Description
items	{ label: string; value: string }[]	-	Radio options.
value	string	-	Currently selected value.
onValueChange	(value: string) => void	-	Called when selection changes.