RadioGroup Component

A radio button selection component that displays options in a vertical list. Supports status-based styling, disabled states, and integrates with Reef's container system for consistent theming.

Usage

Basic Radio Group

Option 1Option 2Option 3

<RadioGroup
  name="basic-example"
  options={[
    { value: "option-1", label: "Option 1" },
    { value: "option-2", label: "Option 2" },
    { value: "option-3", label: "Option 3" },
  ]}
/>

With Label

Select your preferenceChoice AChoice BChoice C

<RadioGroup
  name="labeled-example"
  label="Select your preference"
  options={[
    { value: "a", label: "Choice A" },
    { value: "b", label: "Choice B" },
    { value: "c", label: "Choice C" },
  ]}
/>

Controlled Value

Current selection: "option-b"

Controlled selectionOption AOption BOption C

const [value, setValue] = createSignal("option-b");

<RadioGroup
  name="controlled-example"
  label="Controlled selection"
  value={value}
  onValue={setValue}
  options={[
    { value: "option-a", label: "Option A" },
    { value: "option-b", label: "Option B" },
    { value: "option-c", label: "Option C" },
  ]}
/>

Disabled State

Entire group disabled:

Disabled groupDisabled XDisabled Y

<RadioGroup
  name="disabled-example"
  label="Disabled group"
  disabled
  options={[
    { value: "x", label: "Disabled X" },
    { value: "y", label: "Disabled Y" },
  ]}
/>

Individual Option Disabled

Some options disabledEnabled optionDisabled optionAnother enabled option

<RadioGroup
  name="partial-disabled"
  label="Some options disabled"
  options={[
    { value: "enabled-1", label: "Enabled option" },
    { value: "disabled-1", label: "Disabled option", disabled: true },
    { value: "enabled-2", label: "Another enabled option" },
  ]}
/>

Status Colors

The RadioGroup supports different status colors for semantic meaning. By default, the status is "neutral".

<RadioGroup status="neutral" ... />
<RadioGroup status="primary" ... />
<RadioGroup status="success" ... />
<RadioGroup status="warning" ... />
<RadioGroup status="danger" ... />
<RadioGroup status="info" ... />

Props

Name	Type	Default	Description
`name`	`string`	required	Name attribute to group radio inputs together
`options`	`RadioOption<T>[]`	required	Array of options with value, label, and optional disabled flag
`value`	`Accessor<T \| undefined>`	undefined	Controlled value accessor for the selected option
`onValue`	`(value: T) => void`	undefined	Callback when selection changes
`label`	`string`	undefined	Label text displayed above the radio group
`disabled`	`boolean`	false	Disables all options when true
`status`	`Status`	from ContainerContext or 'neutral'	Status for color theming (e.g., 'success', 'danger', 'warning', 'neutral')
`styles`	`StyleXStyles`	undefined	Additional StyleX styles for the wrapper
`optionStyles`	`StyleXStyles`	undefined	Additional StyleX styles for each option row
`aria-label`	`string`	undefined	Accessible label for the radio group
`aria-describedby`	`string`	undefined	ID of element describing the radio group

RadioOption Type

Each option in the options array has this shape:

interface RadioOption<T extends string = string> {
  value: T;       // The value returned when selected
  label: string;  // Display text for the option
  disabled?: boolean;  // Optional: disable this specific option
}

Container Context

When placed inside a Container component, the RadioGroup automatically adapts its styling based on the container's status. Colors adjust for better contrast against the container background.

// RadioGroup inherits status from container
<Container status="primary">
  <RadioGroup
    name="container-example"
    options={[...]}
  />
</Container>

Accessibility

The RadioGroup component includes several accessibility features:

Uses native radio inputs for proper form semantics and keyboard navigation

Focus-visible outline for keyboard users on each option

Proper role="radiogroup" with aria-label support

Disabled states properly conveyed to assistive technology

Respects prefers-reduced-motion for animations