Rating

Use Rating

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

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <Rating label="Your experience" name="experience" defaultValue={3} max={5} />
    </FloodRoot>
  );
}

Design notes

• Provide a nonempty name for native radio grouping and form submission. value/defaultValue are integers from zero (unselected) to max; max is an integer from 1 to 10. Uncontrolled native reset restores defaultValue. required uses native group validation.
• Arrow keys follow logical direction, Home/End jump to the first/last value, and Space selects the focused radio. One radio is in Tab order. readOnly keeps the current selection focusable without allowing changes; disabled is native.
• Use getValueLabel to localize each radio name. The stars are decorative; native named radios carry the value. hideLabel preserves the legend for assistive technology. No fractional values or review submission engine is included. Available in 0.2.5.

API reference