RadioGroup

A set of checkable buttons, known as radio buttons, where no more than one button can be checked at a time.

Usage

Allows users to select a single option from a set of mutually exclusive choices.

import { RadioGroup } from "@elemnts-ui/react";

<RadioGroup.Root defaultValue="react">
  <RadioGroup.Label>Framework</RadioGroup.Label>
  <RadioGroup.Item value="react">
    <RadioGroup.ItemControl />
    <RadioGroup.ItemText>React</RadioGroup.ItemText>
    <RadioGroup.ItemHiddenInput />
  </RadioGroup.Item>
  <RadioGroup.Item value="vue">
    <RadioGroup.ItemControl />
    <RadioGroup.ItemText>Vue</RadioGroup.ItemText>
    <RadioGroup.ItemHiddenInput />
  </RadioGroup.Item>
</RadioGroup.Root>;

Horizontal

Use the orientation="horizontal" prop to display the radio group items horizontally.

Disabled

Use the disabled prop on the RadioGroup or RadioGroup.Item to disable the radio group or specific items.

API Reference

RadioGroup

The root container for the radio group.

Prop	Type	Default
asChild	`boolean`	`false`
defaultValue	`string`	-
disabled	`boolean`	-
form	`string`	-
id	`string`	-
ids	`Partial<{ root: string; label: string; indicator: string; item: (value: string) => string; itemLabel: (value: string) => string; itemControl: (value: string) => string; itemHiddenInput: (value: string) => string }>`	-
invalid	`boolean`	-
name	`string`	-
onValueChange	`(details: ValueChangeDetails) => void`	-
orientation	`"horizontal" \| "vertical"`	-
readOnly	`boolean`	-
required	`boolean`	-
value	`string`	-

RadioGroupRootProvider

Provides the radio group context to its children.

Prop	Type	Default
value	`UseRadioGroupReturn`	required
asChild	`boolean`	`false`

RadioGroupLabel

The label for the radio group.

Prop	Type	Default
asChild	`boolean`	`false`

RadioGroupItem

Represents an individual radio item in the group.

Prop	Type	Default
value	`string`	required
asChild	`boolean`	`false`
disabled	`boolean`	-
invalid	`boolean`	-

RadioGroupItemText

The text label associated with a radio item.

Prop	Type	Default
asChild	`boolean`	`false`

RadioGroupItemControl

The visual control for a radio item.

Prop	Type	Default
asChild	`boolean`	`false`

RadioGroupItemHiddenInput

The native hidden radio input for accessibility and form submission.

Prop	Type	Default
asChild	`boolean`	`false`

RadioGroupIndicator

A visual indicator that can be used to highlight the selected item.

Prop	Type	Default
asChild	`boolean`	`false`