Rating

Rating is a component used to allow users to provide ratings.

<Rating />

Usage

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

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

import { Rating } from "@workspaces/ui"

<Rating />

Change Size

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

Change Color Scheme

<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.

Change Number of Items

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

Set Decimals

To set decimals, assign a number to fractions.

For example, to set 0.25, set 4.

<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.

Change Color

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

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.

Read-Only

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

Customize Icons

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

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

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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` 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 for accessibility.

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

<Rating aria-label="Rating" />

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

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

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.