36 lines
1.2 KiB
Markdown
36 lines
1.2 KiB
Markdown
### rating
|
|
|
|
Rating is a set of radio buttons that allow the user to rate something
|
|
|
|
[rating docs](https://daisyui.com/components/rating/)
|
|
|
|
#### Class names
|
|
|
|
- component: `rating`
|
|
- modifier: `rating-half`, `rating-hidden`
|
|
- size: `rating-xs`, `rating-sm`, `rating-md`, `rating-lg`, `rating-xl`
|
|
|
|
#### Syntax
|
|
|
|
```html
|
|
<div class="rating {MODIFIER}">
|
|
<input type="radio" name="rating-1" class="mask mask-star" />
|
|
</div>
|
|
```
|
|
|
|
For a read-only (non-interactive) rating, use `<div>` elements instead of radio inputs and mark the selected one with `aria-current="true"`:
|
|
|
|
```html
|
|
<div class="rating">
|
|
<div class="mask mask-star" aria-label="1 star"></div>
|
|
<div class="mask mask-star" aria-label="2 star" aria-current="true"></div>
|
|
<div class="mask mask-star" aria-label="3 star"></div>
|
|
</div>
|
|
```
|
|
|
|
#### Rules
|
|
|
|
- {MODIFIER} is optional and can have one of the modifier/size class names
|
|
- Each set of rating inputs should have unique `name` attributes to avoid conflicts with other ratings on the same page
|
|
- Add `rating-hidden` for the first radio to make it hidden so user can clear the rating
|
|
- For a read-only/non-interactive rating, use `<div>` elements instead of the radio inputs and mark the selected one with `aria-current="true"`
|