Rating

Rating is a component that allows users to evaluate items, presented in the form of icons such as stars or hearts, and visually displays the rating selected by the user.

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" />

Copied!

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

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

Copied!

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	Roles and Attributes	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 `isReadOnly` is specified.
	`aria-disabled`	Set to `"true"` when `isDisabled` is specified.
`RatingItem`	`aria-label`	Set `value`.
`RatingIcon` Internal	`aria-hidden="true"`	Exclude `RatingIcon` from the accessibility tree.

Edit this page on GitHub

PreviousEditable NextSegmentedControl