RadioGroup

A set of mutually exclusive options. Use it when all choices should stay visible; for long lists use a Select.

import { RadioGroup } from 'jarvis-react-ui';

Basic

Pass the options as items, each with a unique value and a label. Without value the group keeps its own state; defaultValue sets the start selection.

import { RadioGroup } from 'jarvis-react-ui';

export default function Basic() {
    return (
        <RadioGroup
            aria-label="Render quality"
            defaultValue="high"
            items={[
                { value: 'low', label: 'Low' },
                { value: 'high', label: 'High' },
                { value: 'ultra', label: 'Ultra' },
            ]}
        />
    );
}

Descriptions and disabled options

description adds a muted second line; disabled on an item skips it. Control the group with value and onValueChange.

import { useState } from 'react';
import { RadioGroup } from 'jarvis-react-ui';

export default function Descriptions() {
    const [mode, setMode] = useState('assist');

    return (
        <div className="flex flex-col gap-3">
            <RadioGroup
                aria-label="Autopilot mode"
                value={mode}
                onValueChange={setMode}
                items={[
                    { value: 'manual', label: 'Manual', description: 'You fly, JARVIS watches.' },
                    { value: 'assist', label: 'Assist', description: 'Course corrections only.' },
                    {
                        value: 'full',
                        label: 'Full',
                        description: 'Requires clearance.',
                        disabled: true,
                    },
                ]}
            />
            <span className="text-[10px] text-text-secondary">Mode: {mode}</span>
        </div>
    );
}

Horizontal

orientation="horizontal" puts the options in a row, size="sm" makes them smaller.

import { RadioGroup } from 'jarvis-react-ui';

export default function Horizontal() {
    return (
        <RadioGroup
            aria-label="Units"
            orientation="horizontal"
            size="sm"
            defaultValue="metric"
            items={[
                { value: 'metric', label: 'Metric' },
                { value: 'imperial', label: 'Imperial' },
            ]}
        />
    );
}

Sound

Hovering an option plays hover_button and selecting plays click through the nearest SfxProvider. See Sound effects.

Accessibility

The group has role="radiogroup" (name it with aria-label or aria-labelledby); each option is a button with role="radio" and aria-checked.
The group is one Tab stop (roving focus): Tab focuses the selected option, or the first enabled one. Arrow keys move the selection and skip disabled options; Home and End jump to the first and last option; Space selects the focused option.

API

Prop	Type	Default	Description
`items` (required)	`RadioItem[]`		Options in display order.
`aria-label`	`string`		Accessible name of the group. Use it or `aria-labelledby`.
`aria-labelledby`	`string`		Id of an element that names the group.
`className`	`string`		Additional class names for the `role="radiogroup"` element.
`defaultValue`	`string`		Initially selected value when uncontrolled; without it nothing is selected.
`disabled`	`boolean`	`false`	Disables the whole group.
`onValueChange`	`((value: string) => void)`		Called with the new value when the user selects an option.
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Stacks the options (`vertical`) or puts them in a row (`horizontal`).
`size`	`'sm' \| 'md'`	`'md'`	Dot and text size.
`value`	`string`		Controlled selected value. Leave undefined to use `defaultValue`.

Type `RadioItem`

One option of a RadioGroup.

Field	Type	Default	Description
`label` (required)	`ReactNode`		Visible label; also the accessible name of the option.
`value` (required)	`string`		Unique value of the option, reported through `onValueChange`.
`description`	`ReactNode`		Muted second line below the label.
`disabled`	`boolean`	`false`	Disables the option.