메인 콘텐츠로 이동

Radio Group

A set of mutually exclusive radio buttons for selecting a single option.

Overview

RadioGroup is a compound component that enforces single-selection semantics and follows the WAI-ARIA radio group pattern including roving tabindex keyboard navigation. Use RadioGroup for mutually exclusive choices between 2–7 options. For more options, consider Select for a compact layout. For binary choices, Switch or Checkbox may be more appropriate. It supports both controlled (value + onValueChange) and uncontrolled (defaultValue) usage.

Accessibility

  • Follows the WAI-ARIA Radio Group pattern with roving tabindex navigation.
  • Arrow Down / Arrow Right moves focus to the next radio item. Arrow Up / Arrow Left moves to the previous.
  • Tab moves focus into and out of the radio group as a single unit.
  • Each RadioGroup.Item has role="radio" with aria-checked reflecting the selected state.

Import

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

Default

Each RadioGroup.Item is paired with a RadioGroup.Indicator that renders the selected state. Use defaultValue for uncontrolled usage.

Size

Three sizes are available on RadioGroup.Item: large, medium, and small. The default is medium.

API Reference

RadioGroup (Root)

PropTypeDefaultDescription
defaultValuestring-Value of the item selected by default. Use for uncontrolled scenarios where the component manages its own state.
valuestring-The currently selected value. Use together with `onValueChange` for controlled selection.
onValueChange(value: string) => void-Callback invoked when the user selects a different radio item. Receives the new value string.
disabledbooleanfalseDisables all items in the group, preventing selection changes and dimming the visual appearance.

RadioGroup.Item

PropTypeDefaultDescription
value*string-Unique value identifying this radio item. Must match the group's `value` or `defaultValue` to appear selected.
size"large" | "medium" | "small""medium"Controls the radio button dimensions and associated label size.
disabledbooleanfalseDisables this individual radio item independently of the group's disabled state.

RadioGroup.Indicator

Renders the visual indicator dot inside RadioGroup.Item. Accepts standard HTML span props.