---
meta:
title: Rating
description: Ratings give users a way to quickly view and provide feedback.
layout: component
---
```html:preview
```
```jsx:react
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
const App = () => ;
```
## Examples
### Labels
Ratings are commonly identified contextually, so labels aren't displayed. However, you should always provide one for assistive devices using the `label` attribute.
```html:preview
```
```jsx:react
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
const App = () => ;
```
### Maximum Value
Ratings are 0-5 by default. To change the maximum possible value, use the `max` attribute.
```html:preview
```
```jsx:react
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
const App = () => ;
```
### Precision
Use the `precision` attribute to let users select fractional ratings.
```html:preview
```
```jsx:react
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
const App = () => ;
```
### Symbol Sizes
Set the `--symbol-size` custom property to adjust the size.
```html:preview
```
{% raw %}
```jsx:react
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
const App = () => ;
```
{% endraw %}
### Readonly
Use the `readonly` attribute to display a rating that users can't change.
```html:preview
```
```jsx:react
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
const App = () => ;
```
### Disabled
Use the `disable` attribute to disable the rating.
```html:preview
```
```jsx:react
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
const App = () => ;
```
### Detecting Hover
Use the `sl-hover` event to detect when the user hovers over (or touch and drag) the rating. This lets you hook into values as the user interacts with the rating, but before they select a value.
The event has a payload with `phase` and `value` properties. The `phase` property tells when hovering starts, moves to a new value, and ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.
```html:preview
```
```jsx:react
import { useState } from 'react';
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent'];
const css = `
.detect-hover span {
position: relative;
top: -4px;
left: 8px;
border-radius: var(--sl-border-radius-small);
background: var(--sl-color-neutral-900);
color: var(--sl-color-neutral-0);
text-align: center;
padding: 4px 6px;
}
.detect-hover span:empty {
display: none;
}
`;
function handleHover(event) {
rating.addEventListener('sl-hover', event => {
setFeedback(terms[event.detail.value]);
// Clear feedback when hovering stops
if (event.detail.phase === 'end') {
setFeedback('');
}
});
}
const App = () => {
const [feedback, setFeedback] = useState(true);
return (
<>
{feedback}
>
);
};
```
### Custom Icons
You can provide custom icons by passing a function to the `getSymbol` property.
```html:preview
```
{% raw %}
```jsx:react
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
const App = () => (
''}
style={{ '--symbol-color-active': '#ff4136' }}
/>
);
```
{% endraw %}
### Value-based Icons
You can also use the `getSymbol` property to render different icons based on value.
```html:preview
```
```jsx:react
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
function getSymbol(value) {
const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
return ``;
}
const App = () => ;
```