Radio group — Kipui

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

01Basic

DefaultComfortable

vertical

MonthlyYearly

horizontal

<RadioGroup orientation="vertical | horizontal" />

03Size

sm

md

lg

<RadioGroup size="sm | md | lg" />

04Variant

success

warning

destructive

info

<RadioGroup variant="primary | success | …" />

05Description

FreeFor personal projects and experiments.ProFor teams that ship to production.

<RadioGroupItem description="…" />

06Disabled

EnabledDisabled

item

OneTwo

group

<RadioGroup disabled /> · <RadioGroupItem disabled />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { RadioGroup, RadioGroupItem } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

radio-group-example.tsx

import { RadioGroup, RadioGroupItem } from "kipui";

<RadioGroup defaultValue="monthly" onValueChange={setPlan}>
  <RadioGroupItem value="monthly">Monthly</RadioGroupItem>
  <RadioGroupItem value="yearly">Yearly</RadioGroupItem>
</RadioGroup>

Arrow keys move between items and select as they go — that is the expected radio behaviour, not a bug.
`name` makes the group submit with a surrounding form.

API reference

Transcribed from the component's own types. Props with no default are required.

RadioGroup

Prop	Default	Description
valuestring	required	Controlled selection.
defaultValuestring	required	Uncontrolled seed.
onValueChange(value: string) => void	required	Fires with the newly selected value.
namestring	required	Form field name for submission.
size"sm" \| "md" \| "lg"	"md"	Control size.
variant"default" \| "primary" \| "success" \| "destructive"	"default"	Colour of the selected dot.
orientation"vertical" \| "horizontal"	"vertical"	Layout and arrow-key axis.
disabledboolean	false	Disables every item in the group.
appearance"dot" \| "check" \| "filled"	"dot"	What marks the selected item.

RadioGroupItem

Prop	Default	Description
valuestring	required	Required. The value this item selects.
disabledboolean	false	Skips this item in the roving focus order.
labelstring	required	Text beside the control. Composes a label for you.
descriptionstring	required	Second line under the label.