Skip to content
Components

Radio

Individual radio button. Must be used within a RadioGroup.

Usage

import { Radio, RadioProps, radioVariants } from "@instruments/materia-ui/components/radio";

Best practices

  • A Radio only works inside a RadioGroup (it renders a Base UI Radio.Root) - the group owns selection; a standalone Radio won't toggle.

  • Give every Radio a unique value and pair it with a Label - or use RadioGroupItem, which bundles the radio and its wired label.

  • For selectable-card options rather than plain dots, use RadioCardGroup.

Props

PropTypeDefaultDescription
sizeResponsiveSize"sm"

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

Also exports

  • typeRadioProps
  • constradioVariants

Composition

Used by

MenuItem, RadioCardGroup, RadioGroup