Component

Radio Group

A radio group for settings where every option needs a short explanation.

Preview

DailyBest for fast-moving money logs.WeeklyGood for lightweight planning.MonthlyUse for slower reporting cycles.

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { RadioGroup } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/radio-group.json

Copied source import

code

import "@/styles/axie.css";import { RadioGroup } from "@/components/axie/radio-group";

Prefer @axie/radio-group? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { RadioGroup } from "axie-ui";export function Example() {  return (    <RadioGroup      name="cadence"      options={options}      value={value}      onValueChange={setValue}    />  );}

Accessibility

Group related radio items with a shared accessible name.
Use radio buttons when exactly one option must be selected.
Keep descriptions short so keyboard users can scan the group quickly.

API Reference

Prop	Type	Default	Description
name	string	-	Shared native radio name.
options	RadioGroupOption[]	-	Radio options.
value	string	-	Selected value.
onValueChange	(value: string) => void	-	Called when a radio is selected.