Rating

Accessible star rating built with radio input types.

View Source 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Styles

Variants

• default 
• invalid 

Props

• default 

Examples

Basic

winduum

<div class="x-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>

winduum-vue

<script setup lang="ts">
    import { Rating } from '@/components/rating'
</script>

<template>
    <Rating 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">
    </Rating>
</template>

winduum-react

import { Rating } from '@/components/rating'

export function Example() {
    return (
        <Rating 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" />
        </Rating>
    )
}

Accessibility

Rating is a native radio group — each star is an input type="radio" sharing the same name, so keyboard users can move between values with arrow keys and the selection is announced by screen readers. Give every input a descriptive aria-label (e.g. Rate 3/5) as shown in the example.