Rating
Rating is a set of radio buttons that allow the user to rate something.
Default
0 of 5
<script lang="ts">
import { Rating } from 'stwui';
</script>
<Rating name="rating-1" showValue />
<br />
<Rating name="rating-2" value={3} class="text-orange-400" />
Half
<script lang="ts">
import { Rating } from 'stwui';
</script>
<Rating name="rating-3" half />
<br />
<Rating name="rating-4" value={3} half class="text-orange-400" />
Size
<script lang="ts">
import { Rating } from 'stwui';
</script>
<Rating name="rating-5" size="sm" />
<br />
<Rating name="rating-6" value={3} class="text-orange-400" />
<br />
<Rating name="rating-7" value={3} size="lg" class="text-purple-400" />
Show Value
0 of 5
3 of 5
3 of 5
0 of 5
3 of 5
3.5 of 5
<script lang="ts">
import { Rating } from 'stwui';
</script>
<Rating name="rating-5" size="sm" showValue />
<br />
<Rating name="rating-6" value={3} class="text-orange-400" showValue />
<br />
<Rating name="rating-7" value={3} size="lg" class="text-purple-400" showValue />
<br />
<Rating name="rating-8" size="sm" half showValue />
<br />
<Rating name="rating-9" value={3} half class="text-orange-400" showValue />
<br />
<Rating name="rating-10" value={3.5} half size="lg" class="text-purple-400" showValue />
Rating Props
half | boolean | false |
outOf | number | 5 |
name | string | |
value | number | 0 |
size | 'sm' | 'md' | 'lg' | md |
showValue | boolean | false |