# Rating

> Star rating.

Source: https://ui.jcsoftdev.com/docs/components/rating

Star rating. Editable ratings are a single `role="slider"` (arrows, Home/End); read-only ones
are an `img` with the value as its label. Half values render as a half-filled star.

## Import

```ts
import { Rating } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/rating`.

## Usage

```tsx
<Rating
  defaultValue={4}
  max={5}
  precision={1}
  size="md"
  aria-label="Valoración del corte"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` |  |  |
| `defaultValue` | `number` | `0` |  |
| `onValueChange` | `((value: number) => void)` |  |  |
| `max` | `number` | `5` |  |
| `precision` | `1 \| 0.5` | `1` | 0.5 allows half stars. |
| `readOnly` | `boolean` |  |  |
| `disabled` | `boolean` |  |  |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |  |
| `showValue` | `boolean` |  | Shows the numeric value after the stars. |
| `aria-label` | `string` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/forms-rating--default)
- [Half Stars](/storybook/?path=/story/forms-rating--half-stars)
- [Read Only](/storybook/?path=/story/forms-rating--read-only)
- [Sizes](/storybook/?path=/story/forms-rating--sizes)
- [Controlled Value](/storybook/?path=/story/forms-rating--controlled-value)
- [Narrow](/storybook/?path=/story/forms-rating--narrow)
- [Brutal Preset](/storybook/?path=/story/forms-rating--brutal-preset)

## Source

`packages/ui/src/forms/rating/rating.tsx`