# Rating
[component-header:sl-rating]
Ratings give users a way to quickly view and provide feedback.
```html preview
```
```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => ;
```
## Examples
### 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';
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';
const App = () => ;
```
## Symbol Sizes
Set the `--symbol-size` custom property to adjust the size.
```html preview
```
```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => ;
```
### 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';
const App = () => ;
```
### Disabled
Use the `disable` attribute to disable the rating.
```html preview
```
```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => ;
```
### Custom Icons
You can provide custom icons by passing a function to the `getSymbol` property.
```html preview
```
```jsx react
import '@shoelace-style/shoelace/dist/components/icon/icon';
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
''} style={{ '--symbol-color-active': '#ff4136' }} />
);
```
### Value-based Icons
You can also use the `getSymbol` property to render different icons based on value.
```html preview
```
```jsx react
import '@shoelace-style/shoelace/dist/components/icon/icon';
import { SlRating } from '@shoelace-style/shoelace/dist/react';
function getSymbol(value) {
const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
return ``;
}
const App = () => ;
```
[component-metadata:sl-rating]