<a id="rating"></a>

## Rating  
**Category**: Data Input
Input component for collecting user ratings using visual symbols
### Examples

#### Basic Rating  
```python
Div(
    Input(type='radio', name='rating-1', cls='mask mask-star'),
    Input(type='radio', name='rating-1', checked=True, cls='mask mask-star'),
    Input(type='radio', name='rating-1', cls='mask mask-star'),
    Input(type='radio', name='rating-1', cls='mask mask-star'),
    Input(type='radio', name='rating-1', cls='mask mask-star'),
    cls='rating'
)
```

#### Star Variant  
```python
Div(
    Input(type='radio', name='rating-3', cls='mask mask-star-2 bg-orange-400'),
    Input(type='radio', name='rating-3', checked=True, cls='mask mask-star-2 bg-orange-400'),
    Input(type='radio', name='rating-3', cls='mask mask-star-2 bg-orange-400'),
    Input(type='radio', name='rating-3', cls='mask mask-star-2 bg-orange-400'),
    Input(type='radio', name='rating-3', cls='mask mask-star-2 bg-orange-400'),
    cls='rating'
)
```

#### Heart Multicolor Variant  
```python
Div(
    Input(type='radio', name='rating-4', cls='mask mask-heart bg-red-400'),
    Input(type='radio', name='rating-4', checked=True, cls='mask mask-heart bg-orange-400'),
    Input(type='radio', name='rating-4', cls='mask mask-heart bg-yellow-400'),
    Input(type='radio', name='rating-4', cls='mask mask-heart bg-lime-400'),
    Input(type='radio', name='rating-4', cls='mask mask-heart bg-green-400'),
    cls='rating gap-1'
)
```

#### With Hidden Option  
```python
Div(
    Input(type='radio', name='rating-2', cls='rating-hidden'),
    Input(type='radio', name='rating-2', cls='mask mask-star-2'),
    Input(type='radio', name='rating-2', checked=True, cls='mask mask-star-2'),
    Input(type='radio', name='rating-2', cls='mask mask-star-2'),
    Input(type='radio', name='rating-2', cls='mask mask-star-2'),
    Input(type='radio', name='rating-2', cls='mask mask-star-2'),
    cls='rating rating-lg'
)
```

#### Read only rating  
```python
Div(
    Div(cls='mask mask-star', aria_label='1 star'),
    Div(cls='mask mask-star', aria_label='2 star'),
    Div(cls='mask mask-star', aria_label='3 star', aria_current='true'),
    Div(cls='mask mask-star', aria_label='4 star'),
    Div(cls='mask mask-star', aria_label='5 star'),
    cls='rating'
)
```

#### Star Custom Variant  
```python
Div(
    Input(type='radio', name='rating-5', cls='mask mask-star-2 bg-green-500'),
    Input(type='radio', name='rating-5', checked=True, cls='mask mask-star-2 bg-green-500'),
    Input(type='radio', name='rating-5', cls='mask mask-star-2 bg-green-500'),
    Input(type='radio', name='rating-5', cls='mask mask-star-2 bg-green-500'),
    Input(type='radio', name='rating-5', cls='mask mask-star-2 bg-green-500'),
    cls='rating'
)
```

#### Size Variants  
```python
Div(
    Div(
        Input(type='radio', name='rating-6', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-6', checked=True, cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-6', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-6', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-6', cls='mask mask-star-2 bg-orange-400'),
        cls='rating rating-xs'
    ),
    Div(
        Input(type='radio', name='rating-7', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-7', checked=True, cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-7', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-7', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-7', cls='mask mask-star-2 bg-orange-400'),
        cls='rating rating-sm'
    ),
    Div(
        Input(type='radio', name='rating-8', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-8', checked=True, cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-8', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-8', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-8', cls='mask mask-star-2 bg-orange-400'),
        cls='rating rating-md'
    ),
    Div(
        Input(type='radio', name='rating-9', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-9', checked=True, cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-9', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-9', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-9', cls='mask mask-star-2 bg-orange-400'),
        cls='rating rating-lg'
    ),
    cls='flex flex-col items-center gap-2'
)
```

#### Half Stars  
```python
Div(
    Input(type='radio', name='rating-10', cls='rating-hidden'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    Input(type='radio', name='rating-10', checked='checked', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    cls='rating rating-lg rating-half'
)
```