Grouped radios with native keyboard navigation.
A radiogroup rendered from an options array, with arrow-key selection and roving focus for free via native radios. Vertical or horizontal layout, inline error / helper text, and light / dark / auto themes. Ships a standalone Radio too.
Add the package. Native radios provide arrow-key selection and roving focus for free.
pnpm add @roy-ui/uiimport { RadioGroup } from '@roy-ui/ui';
// or just this component (Radio ships here too):
import { RadioGroup, Radio } from '@roy-ui/ui/radio-group';Pass a legend and an options array. Arrow keys move and select; orientation lays the options out vertically or in a row.
The same group, two orientations. An error string adds a helper line under the group.
<RadioGroup
label="Plan"
name="plan"
defaultValue="growth"
options={[
{ label: 'Starter', value: 'starter' },
{ label: 'Growth', value: 'growth' },
{ label: 'Scale', value: 'scale' },
]}
/>
<RadioGroup label="Billing" name="billing" orientation="horizontal"
options={[{ label: 'Monthly', value: 'm' }, { label: 'Yearly', value: 'y' }]} />Controlled with value + onChange, or uncontrolled with defaultValue.
| Prop | Type | Default | Description |
|---|---|---|---|
options | RadioOption[] | — | Required. { label, value, disabled? } per radio. |
label | string | — | Group legend. |
name | string | generated | Native group name (exclusivity). |
value | string | — | Controlled selected value. |
defaultValue | string | — | Uncontrolled initial value. |
onChange | (value: string) => void | — | Fires on selection. |
orientation | 'vertical' | 'horizontal' | 'vertical' | Layout direction. |
error | boolean | string | false | Error state. A string becomes the helper line. |
theme | 'light' | 'dark' | 'auto' | 'auto' | Follow the system or force a side. |