Components

Radio Group

Choose one of a list, each option with a label and a description; native radios, so arrow keys work.

After a prepayment

Lower the EMIKeep the end date; pay less each month.Shorten the tenureKeep the EMI; finish sooner and save more interest.

Import

import { RadioGroup, Radio } from '@rinzai/zen';

Examples

Horizontal

In a row, with one option disabled.

Repeat

WeeklyMonthlyYearlyCustom

API reference

<RadioGroup>

Choose one of a list: native radios underneath, so arrow keys move and pick within the group, and forms work as usual. Fill it with Radio. For a few short options side by side use Segmented; for options that show themselves, RadioCards.

Prop	Type	Default
`children`Required The Radios.	`ReactNode`	`—`
`onChange`Required	`(value: V) => void`	`—`
`value`Required The chosen option, or null for none yet.	`string \| null`	`—`
`aria-describedby`	`string`	`—`
`aria-label`	`string`	`—`
`className` Classes for the options' container.	`string`	`—`
`disabled`	`boolean`	`false`
`label` Shown above the options, naming the group. Without it, give the group an aria-label.	`ReactNode`	`—`
`name` Form field name; defaults to a generated one.	`string`	`—`
`orientation` Options in a column (default) or wrapping in a row.	`"horizontal" \| "vertical"`	`vertical`

<Radio>

One option: a round radio that fills with a glowing dot when chosen, its label, and an optional description.

Prop	Type	Default
`children`Required The label.	`ReactNode`	`—`
`value`Required	`string`	`—`
`className`	`string`	`—`
`description` A muted line under the label.	`ReactNode`	`—`
`disabled` Can't be chosen (and the arrow keys skip it).	`boolean`	`—`