Skip to content

Rating


View Source 

Usage

css
@import "winduum/src/ui/rating/index.css" layer(components);

Variants

  • default 

Props

  • default-props 

Tokens

  • invalid 

Installation

Follow instructions for individual framework usage below

  • winduum 
  • winduum-vue 
  • winduum-react 

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>
    )
}

Released under the MIT License.