import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import Star from "examples/rating/star.tsx";
import StarReadOnly from "examples/rating/starReadOnly.tsx";
import Emoticon from "examples/rating/emoticon.tsx";

import { EmoticonRating, StarRating } from "baseui/rating";
import { Block } from "baseui/block";
import * as RatingExports from "baseui/rating";
import Yard from "../../components/yard/index";
import ratingYardConfig from "../../components/yard/config/rating";

export default Layout;

# Rating

<Yard placeholderHeight={25} {...ratingYardConfig} />

**Emoji ratings** are to be used to collect a user’s experience in the form of an emotional ranking.
Like star ratings, there five options.

**Star ratings** are to be used to collect feedback from a user’s experience with a product. The
stars indicate a performance rating from one to five.

## Accessibility

This component uses the `[role="radiogroup"]` attribute with the following attributes for each individual rating item:

- `[role="radio"]`
- `[tabindex=0]`
- `[aria-setsize=5]` - total number of elements within the Rating
- `[aria-checked]` - if the rating is active
- `[aria-posinset]` - position within the Rating
- `[aria-disabled]` - if the rating is read only

## Examples

<Example title="Rating with stars" path="rating/star.tsx">
  <Star />
</Example>

<Example title="Rating with stars read only" path="rating/starReadOnly.tsx">
  <StarReadOnly />
</Example>

<Example title="Rating with emoticons" path="rating/emoticon.tsx">
  <Emoticon />
</Example>

<Exports
  component={RatingExports}
  title="Rating exports"
  path="baseui/rating"
/>