RadioGroup
Mutually exclusive choices with room to explain what each choice means.
Live — this one is real
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.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | Choice[] | — | Value, label, optional description and disabled. |
| value / onValueChange | string / function | — | Controlled selection. |
| name | string | — | 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.