Skip to content

RadioGroup

Mutually exclusive choices with room to explain what each choice means.

Live — this one is real

Storage

Usage

import { useState } from "react";
import { RadioGroup } from "mizu-ui";

export function Example() {
  const [value, setValue] = useState("local");
  return (
    <RadioGroup
      label="Storage"
      value={value}
      onValueChange={setValue}
      options={[
        { value: "local", label: "Local", description: "On this device" },
        { value: "cloud", label: "Cloud", description: "Across devices" },
      ]}
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect forms/Selection.tsx

Source is included in the npm package under src/forms/Selection.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
optionsChoice[]—Value, label, optional description and disabled.
value / onValueChangestring / function—Controlled selection.
namestring—Form field name. Unique by default.

Accessibility

Fieldset/legend and native radios supply group semantics and arrow-key behavior.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside