Skip to content
Components

RadioGroup

Container for a group of radio buttons. Manages single selection state.

Usage

import { RadioGroup, RadioGroupItem, RadioGroupItemProps } from "@instruments/materia-ui/components/radio-group";

Best practices

  • Use RadioGroup for one choice among a small closed set; for many searchable options use Select/Combobox, and for on/off use Switch/Checkbox.

  • Drive selection with value + onValueChange (controlled) or defaultValue (uncontrolled) - don't set both on the same group.

  • Prefer RadioGroupItem (radio + wired Label) over hand-pairing Radio and Label; it auto-generates the id/htmlFor link.

Props

PropTypeDefaultDescription
children(required)React.ReactNode

Label text for the radio option

sizeResponsiveSize"sm"

Radio size - a single token or a per-breakpoint object like { base: "sm", md: "lg" }.

descriptionReact.ReactNode

Optional helper text below the label; wired to the radio via aria-describedby.

Also exports

  • componentRadioGroup
  • typeRadioGroupItemProps

Composition

Builds on

Flex, Grid, Label, Radio, Text