Rating renders a row of radio inputs styled as stars or other shapes. Each step maps to a numeric value — read the selected input's value in your Django form handler.
Basic Rating
<c-lb.rating name="rating-basic" variant="warning" rate="2" />
Sizes
<div class="flex flex-col gap-4">
<c-lb.rating name="rating-xs" size="xs" variant="warning" rate="2" max="3" />
<c-lb.rating name="rating-sm" size="sm" variant="warning" rate="2" max="3" />
<c-lb.rating name="rating-md" size="md" variant="warning" rate="2" max="3" />
<c-lb.rating name="rating-lg" size="lg" variant="warning" rate="2" max="3" />
<c-lb.rating name="rating-xl" size="xl" variant="warning" rate="2" max="3" />
</div>
Heart Shape
<c-lb.rating name="rating-heart" shape="heart" variant="error" rate="3" />
Half Stars
<c-lb.rating name="rating-half" half variant="success" rate="3.5" size="lg" />
API Reference
c-lb.rating
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| name | string |
rating
|
No | Name attribute for the radio inputs |
| max | string |
5
|
No | Number of rating items to display |
| shape |
star
star-2
heart
diamond
circle
squircle
hexagon
hexagon-2
decagon
pentagon
triangle
|
star-2
|
No | Mask shape for rating items |
| variant |
neutral
primary
secondary
accent
info
success
warning
error
|
- | No | Background color variant |
| rate | string | - | No | Which item to mark as checked (1-based index) |
| size |
xs
sm
md
lg
xl
|
md
|
No | Rating size |
| half | boolean |
False
|
No | Enable half-star ratings |
| Slot Name | Description |
|---|---|
| default | Optional custom content (overrides generated inputs) |