---
title: Rating
description: "`Rating` is a component used to allow users to provide ratings."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/rating
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-rating--basic
---

```tsx
<Rating />
```

## Usage

```tsx
import { Rating } from "@yamada-ui/react"
```

```tsx
import { Rating } from "@/components/ui"
```

```tsx
import { Rating } from "@workspaces/ui"
```

```tsx
<Rating />
```

### Change Size

```tsx
<VStack>
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size) => <Rating key={size} size={size} defaultValue={3} />}
  </For>
</VStack>
```

### Change Color Scheme

```tsx
<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <Rating key={colorScheme} colorScheme={colorScheme} defaultValue={3} />
    )}
  </For>
</VStack>
```

### Set Default Value

To set a default value, assign a number to `defaultValue`.

```tsx
<Rating defaultValue={5} />
```

### Change Number of Items

To change the number of items, assign a number to `count`.

```tsx
<VStack>
  <For each={[4, 5, 6]}>{(count) => <Rating key={count} count={count} />}</For>
</VStack>
```

### Set Decimals

To set decimals, assign a number to `fractions`.

For example, to set `0.25`, set `4`.

```tsx
<VStack>
  <For
    each={[
      { fractions: 2, defaultValue: 1.5 },
      { fractions: 3, defaultValue: 2.33 },
      { fractions: 4, defaultValue: 3.75 },
    ]}
  >
    {({ fractions, defaultValue }) => (
      <Rating
        key={fractions}
        fractions={fractions}
        defaultValue={defaultValue}
      />
    )}
  </For>
</VStack>
```

### Highlight Selected Only

To highlight only the selected rating, set `highlightSelectedOnly` to `true`.

```tsx
<Rating defaultValue={3} highlightSelectedOnly />
```

### Change Color

To change the color, assign a string or function to `color`.

```tsx
const getColor = useCallback((value: number) => {
  switch (value) {
    case 1:
      return "red.500"

    case 2:
      return "orange.500"

    case 3:
      return "yellow.500"

    case 4:
      return "green.500"

    case 5:
      return "blue.500"

    default:
      return undefined
  }
}, [])

return (
  <VStack>
    <Rating color="green.500" defaultValue={3} />
    <Rating color={getColor} defaultValue={3} />
  </VStack>
)
```

### Disable

To disable, set `disabled` to `true`.

```tsx
<Rating disabled defaultValue={3} />
```

### Read-Only

To make it read-only, set `readOnly` to `true`.

```tsx
<Rating readOnly defaultValue={3} />
```

### Customize Icons

To customize icons, assign `ReactNode` or a function to `emptyIcon` and `filledIcon`.

```tsx
const getColor = useCallback((value: number) => {
  switch (value) {
    case 1:
      return "red.500"

    case 2:
      return "orange.500"

    case 3:
      return "yellow.500"

    case 4:
      return "green.500"

    case 5:
      return "blue.500"

    default:
      return undefined
  }
}, [])

const getIcon = useCallback((value: number) => {
  switch (value) {
    case 1:
      return <AngryIcon />

    case 2:
      return <FrownIcon />

    case 3:
      return <SmileIcon />

    case 4:
      return <LaughIcon />

    case 5:
      return <SmilePlusIcon />

    default:
      return null
  }
}, [])

return (
  <VStack>
    <Rating
      defaultValue={3}
      emptyIcon={<GhostIcon />}
      filledIcon={<GhostIcon />}
    />

    <Rating
      gap="xs"
      color={getColor}
      emptyIcon={getIcon}
      filledIcon={getIcon}
    />
  </VStack>
)
```

### Control

```tsx
const [value, onChange] = useState(3)

return <Rating value={value} onChange={onChange} />
```

## Uses Components & Hooks

<Uses name="rating" />

## Props

| Prop                    | Default | Type                                                                                                                                                                        | Description                                                                                                                     |
| ----------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `as`                    | -       | `As`                                                                                                                                                                        | The HTML element to render.                                                                                                     |
| `asChild`               | -       | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child.                                                                                      |
| `css`                   | -       | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                                                                                                                 |
| `colorScheme`           | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                                                                                                     |
| `size`                  | `"md"`  | `"lg" \| "md" \| "sm" \| "xl" \| "xs"`                                                                                                                                      | The size of the component.                                                                                                      |
| `color`                 | -       | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The color of the filled icons.                                                                                                  |
| `count`                 | `5`     | `number`                                                                                                                                                                    | Number of controls that should be rendered.                                                                                     |
| `defaultValue`          | `0`     | `number`                                                                                                                                                                    | The initial value of the rating.                                                                                                |
| `disabled`              | `false` | `boolean`                                                                                                                                                                   | If `true`, the field will be disabled.                                                                                          |
| `emptyIcon`             | -       | `ReactNodeOrFunction<number>`                                                                                                                                               | The empty icon for the rating.                                                                                                  |
| `filledIcon`            | -       | `ReactNodeOrFunction<number>`                                                                                                                                               | The filled icon for the rating.                                                                                                 |
| `fractions`             | `1`     | `number`                                                                                                                                                                    | Number of fractions each item can be divided into,                                                                              |
| `groupProps`            | -       | `FunctionOrValue<number, RatingGroupProps>`                                                                                                                                 | Props for the rating group.                                                                                                     |
| `highlightSelectedOnly` | `false` | `boolean`                                                                                                                                                                   | If `true`, only the selected icons will be filled.                                                                              |
| `iconProps`             | -       | `FunctionOrValue<number, RatingIconProps>`                                                                                                                                  | Props for the rating item.                                                                                                      |
| `id`                    | -       | `string`                                                                                                                                                                    | The top-level id string that will be applied to the rating. The index of the rating item will be appended to this top-level id. |
| `inputProps`            | -       | `FunctionOrValue<number, HTMLStyledProps<"input">>`                                                                                                                         | Props for the input element.                                                                                                    |
| `invalid`               | `false` | `boolean`                                                                                                                                                                   | If `true`, the field will be invalid.                                                                                           |
| `itemProps`             | -       | `FunctionOrValue<number, RatingItemProps>`                                                                                                                                  | Props for the rating item.                                                                                                      |
| `name`                  | -       | `string`                                                                                                                                                                    | The name of the input element.                                                                                                  |
| `onChange`              | -       | `(value: number) => void`                                                                                                                                                   | The callback invoked when value state changes.                                                                                  |
| `onHover`               | -       | `(value: number) => void`                                                                                                                                                   | The callback invoked when hovering over the rating.                                                                             |
| `readOnly`              | `false` | `boolean`                                                                                                                                                                   | If `true`, the field will be readonly.                                                                                          |
| `required`              | `false` | `boolean`                                                                                                                                                                   | If `true`, the field will be required.                                                                                          |
| `value`                 | -       | `number`                                                                                                                                                                    | The value of the rating.                                                                                                        |

## Accessibility

The `Rating` follows the [WAI-ARIA - Radio Group Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio-rating/) for accessibility.

Setting `aria-label` or `aria-labelledby` on `Rating` will make it readable by screen readers.

```tsx
<Rating aria-label="Rating" />
```

```tsx
<VStack gap="sm">
  <Heading as="h3" id="label">
    Rating
  </Heading>

  <Rating aria-labelledby="label" />
</VStack>
```

### Keyboard Navigation

| Key                       | Description                                                                                                                                           | State |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
| `Tab`                     | Focus on the selected item. If no item is selected, focus on the first item.                                                                          | -     |
| `ArrowLeft`, `ArrowUp`    | Focus on and select the previous item. If the first item is selected, select the last item. Deselect the previously selected item.                    | -     |
| `ArrowRight`, `ArrowDown` | Focus on and select the next item. If the last item is selected, focus on and select the first item. The previously selected item will be deselected. | -     |

### ARIA Roles and Attributes

| Component    | Role and Attribute   | Usage                                             |
| ------------ | -------------------- | ------------------------------------------------- |
| `Rating`     | `role="radiogroup"`  | Indicates that this is a radio group.             |
|              | `aria-label`         | Indicates the number of selected items.           |
|              | `aria-readonly`      | Set to `"true"` when `readOnly` is specified.     |
|              | `aria-disabled`      | Set to `"true"` when `disabled` is specified.     |
| `RatingItem` | `aria-label`         | Set `value`.                                      |
| `RatingIcon` | `aria-hidden="true"` | Exclude `RatingIcon` from the accessibility tree. |