forms / stable

RadioGroup

Pick exactly one of a few visible options; 16px circles that fill cobalt with a white dot.

LIVE PREVIEW

Loading preview…

When to use

2–5 mutually exclusive options that should all be visible (rule type, destination).

Consider an alternative

More options or tight space — use Select.
On/off — use Switch or Checkbox.
Switching views — use segmented Tabs.

Import

import { RadioGroup } from '@revido-llc/kit';

Keyboard interaction

Arrow keys — move and select
Tab — into / out of the group

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


children	ReactNode	—	`Radio` elements (or `RadioGroupItem` + your own `<label htmlFor>`).
className	string	—
defaultValue	string	—	The initially selected value (uncontrolled).
description	ReactNode	—	One short sentence of help under the control.
disabled	boolean	—	Radix compatibility: prefer `isDisabled`.
errorMessage	string \| ((validation: ValidationResult) => string)	—	Error text shown while the field is invalid (or a function of the validation result).
label	ReactNode	—	Visible label. Omit only when an `aria-label` names the field.
onChange	((value: string) => void)	—	Called with the newly selected value.
onValueChange	((value: string) => void)	—	Radix compatibility: prefer `onChange`.
orientation	"vertical" \| "horizontal"	"vertical"	Column (default) or row. Arrow keys follow the orientation.
required	boolean	—	Radix compatibility: prefer `isRequired`.
value	string	—	The selected value (controlled).
form	string	—	The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
isDisabled	boolean	—	Whether the input is disabled.
isInvalid	boolean	—	Whether the input value is invalid.
isReadOnly	boolean	—	Whether the input can be selected but not changed by the user.
isRequired	boolean	—	Whether user input is required on the input before form submission.
name	string	—	The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
render	DOMRenderFunction<"div", RadioGroupRenderProps>	—	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
validate	((value: string) => ValidationError \| true)	—	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
validationBehavior	"native" \| "aria"	'native'	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.

Related exports

Radio, RadioGroupItem

Examples

Basic

<RadioGroup label="Billing" value={billing} onChange={setBilling}>
  <Radio value="hourly">Hourly</Radio>
  <Radio value="fixed">Fixed price</Radio>
</RadioGroup>

With descriptions

<Radio value="any" description="The parent moves when one child reaches the status.">Any child matches</Radio>

Horizontal

<RadioGroup label="Size" orientation="horizontal">…</RadioGroup>

Card options (RadioGroupItem)

Bare circles paired with your own `<label htmlFor>` — the Radix-era pattern.

<RadioGroup value={dest} onValueChange={setDest}>
  <RadioGroupItem value="create" id="dest-create" />
  <label htmlFor="dest-create">Create new project</label>
</RadioGroup>

Literal anatomy

Static component anatomy; bind events in the consuming app.

<RadioGroup label="Visibility" defaultValue="team"><RadioGroupItem value="team">Team</RadioGroupItem><RadioGroupItem value="private">Private</RadioGroupItem></RadioGroup>