Forms

RadioGroup

Picks exactly one option from a short list.

import { RadioGroup, Radio } from "@flinbu/seed";

With descriptions

Monthly$39 per editor

Yearly2 months free

Decide later

import { RadioGroup, Radio } from "@flinbu/seed";

<RadioGroup aria-label="Billing" defaultValue="monthly">
  <Radio value="monthly" label="Monthly" description="$39 per editor" />
  <Radio value="yearly" label="Yearly" description="2 months free" />
  <Radio value="later" label="Decide later" disabled />
</RadioGroup>

Horizontal

Compact

Default

Comfortable

import { RadioGroup, Radio } from "@flinbu/seed";

<RadioGroup aria-label="Density" orientation="horizontal" defaultValue="default">
  <Radio value="compact" label="Compact" />
  <Radio value="default" label="Default" />
  <Radio value="comfortable" label="Comfortable" />
</RadioGroup>

Use it for

2 to 5 options people should compare side by side.

Use something else for

Long lists: use Select.

Props

Prop	Type	Default	Description
`value / defaultValue`	`string`	`none`	Selected option.
`onValueChange`	`(value: string) => void`	`none`	Called when the selection changes.
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout and arrow-key direction.
`invalid`	`boolean`	`none`	Error border on every Radio.
`Radio: value`	`string`	`none`	The option's value.
`Radio: label, description`	`ReactNode`	`none`	Text next to the circle.

Accessibility

Built on Radix RadioGroup: arrow keys move and select, Tab leaves the group.
Give the group an aria-label or a visible label.