RadioGroup

Use RadioGroup

RadioGroup is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, RadioGroup } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <RadioGroup name="visibility" legend="Visibility" options={[{ value: "private", label: "Private" }, { value: "team", label: "Team" }]} defaultValue="private" />
    </FloodRoot>
  );
}

Design notes

• Composes Fieldset and existing native choice controls. The ref targets HTMLFieldSetElement; options need unique values and visible labels.
• value/onValueChange is controlled; defaultValue initializes an uncontrolled group. Native form reset restores uncontrolled defaults without firing onValueChange; controlled values remain owned by the host.
• name belongs to the inputs. The form prop associates every input with an external form. Disabled options and groups follow native submission rules.
• RadioGroup supports native required. CheckboxGroup returns repeated name/value entries; validate minimum/maximum selections in the host and explain errors through status/message.

API reference