Rating
View Source
Usage
css
@import "winduum/src/ui/rating/index.css" layer(components);
Variants
Props
Tokens
Installation
Follow instructions for individual framework usage below
Examples
Basic
html
<div class="ui-rating accent-warning">
<input type="radio" name="rating" value="1" aria-label="Rate 1/5">
<input type="radio" name="rating" value="2" aria-label="Rate 2/5">
<input type="radio" name="rating" value="3" aria-label="Rate 3/5">
<input type="radio" name="rating" value="4" aria-label="Rate 4/5">
<input type="radio" name="rating" value="5" aria-label="Rate 5/5">
</div>
vue
<script setup lang="ts">
import { UiRating } from '@/components/ui/rating'
</script>
<template>
<UiRating class="accent-warning">
<input type="radio" name="rating" value="1" aria-label="Rate 1/5">
<input type="radio" name="rating" value="2" aria-label="Rate 2/5">
<input type="radio" name="rating" value="3" aria-label="Rate 3/5">
<input type="radio" name="rating" value="4" aria-label="Rate 4/5">
<input type="radio" name="rating" value="5" aria-label="Rate 5/5">
</UiRating>
</template>
jsx
import { UiRating } from '@/components/ui/rating'
export function Example() {
return (
<UiRating class="accent-warning">
<input type="radio" name="rating" value="1" aria-label="Rate 1/5" />
<input type="radio" name="rating" value="2" aria-label="Rate 2/5" />
<input type="radio" name="rating" value="3" aria-label="Rate 3/5" />
<input type="radio" name="rating" value="4" aria-label="Rate 4/5" />
<input type="radio" name="rating" value="5" aria-label="Rate 5/5" />
</UiRating>
)
}