CheckboxGroup

Use CheckboxGroup

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

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <CheckboxGroup name="notifications" legend="Notifications" options={[{ value: "updates", label: "Product updates" }, { value: "releases", label: "Release notes" }]} defaultValue={["updates"]} />
    </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.
• CheckboxGroup has no required/min/max shortcut: a required checkbox means that specific checkbox. Validate the selected array in the host and use group status/message.

API reference