# Rating

A compact star rating backed by a named native radio group.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"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

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `hideLabel` | `boolean` | `false` |
| `value` | `number` | `—` |
| `defaultValue` | `number` | `0` |
| `max` | `number` | `5` |
| `onValueChange` | `(value: number) => void` | `—` |
| `getValueLabel` | `(value: number, max: number) => string` | `—` |
| `readOnly` | `boolean` | `false` |
| `required` | `boolean` | `—` |
| `name` | `string` | `Required` |
| `form` | `string` | `—` |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
| `Native HTML props` | `Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "children" \| "onChange" \| "defaultValue">` | `Forwarded` |