## Rating  
Pick and display rating  
Category: Inputs  

### Introduction

### Read only

```python
import dash_mantine_components as dmc

component = dmc.Group(
    children=dmc.Rating(fractions=2, value=3.5, readOnly=True), justify="center"
)
```
### Fractions

```python
import dash_mantine_components as dmc


component = dmc.Stack(
    [
        dmc.Group([dmc.Text("Fractions: 2"), dmc.Rating(fractions=2, value=1)]),
        dmc.Group([dmc.Text("Fractions: 3"), dmc.Rating(fractions=3, value=2.3333)]),
        dmc.Group([dmc.Text("Fractions: 4"), dmc.Rating(fractions=4, value=3.75)]),
    ]
)
```
### Custom Symbol

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Rating(
    value=1,
    emptySymbol=DashIconify(icon="tabler:sun"),
    fullSymbol=DashIconify(icon="tabler:moon"),
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name        | Static selector             | Description                                 |
|:------------|:----------------------------|:--------------------------------------------|
| root        | .mantine-Rating-root        | Root element                                |
| starSymbol  | .mantine-Rating-starSymbol  | Default star icon                           |
| input       | .mantine-Rating-input       | Item input, hidden by default               |
| label       | .mantine-Rating-label       | Item label, used to display star icon       |
| symbolBody  | .mantine-Rating-symbolBody  | Wrapper around star icon for centering      |
| symbolGroup | .mantine-Rating-symbolGroup | Group of symbols, used to display fractions |


### Keyword Arguments
#### Rating

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any CSS color value, `'yellow'` by
    default.

- count (number; optional):
    Number of controls, `5` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- emptySymbol (a list of or a singular dash component, string or number; optional):
    Icon displayed when the symbol is empty.

- fractions (number; optional):
    Number of fractions each item can be divided into, `1` by default.

- fullSymbol (a list of or a singular dash component, string or number; optional):
    Icon displayed when the symbol is full.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- highlightSelectedOnly (boolean; optional):
    If set, only the selected symbol changes to full symbol when
    selected, `False` by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- name (string; optional):
    `name` attribute passed down to all inputs. By default, `name` is
    generated randomly.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- readOnly (boolean; optional):
    If set, the user cannot interact with the component, `False` by
    default.

- size (number; optional):
    Controls component size, `'sm'` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- value (number; default 0):
    Value for controlled component.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.