Rating

Rating allows users to rate items with stars or other shapes. Supports labels, half stars, different masks, and reactive state binding.

// Dynamic import of the Rating component

const { default: Rating } = await import('/components/data-input/rating.js');

const { tags, $ } = Lightview;
const { div, p } = tags;

// 1. Basic rating
const basic = Rating({ 
    defaultValue: 3
});

// 2. Rating with label
const withLabel = Rating({ 
    label: 'Rate this product',
    defaultValue: 4,
    max: 5
});

// 3. Rating with different colors and masks
const hearts = Rating({ 
    label: 'Love it?',
    defaultValue: 3,
    mask: 'heart',
    color: 'red-500'
});

// 4. Half stars
const halfStars = Rating({ 
    label: 'Precise rating',
    half: true,
    defaultValue: 3.5,
    hidden: true
});

// Insert all examples
$('#demo').insert(
    div({ class: 'space-y-6' }, basic, withLabel, hearts, halfStars)
);

const { default: Rating } = await import('/components/data-input/rating.js');

const { signal, tags, $ } = Lightview;
const { div, p, span } = tags;

// Signal for two-way binding
const rating = signal(0);

// Reactive rating demo
const reactiveDemo = div({ class: 'space-y-4' },
    Rating({ 
        label: 'How was your experience?',
        value: rating,
        max: 5,
        size: 'lg',
        hidden: true,
        helper: 'Click to rate'
    }),
    div({ class: 'divider' }),
    p({ class: 'text-lg font-semibold' }, 
        () => {
            const val = rating.value;
            if (val === 0) return span({class: 'opacity-50'}, 'No rating yet');
            if (val <= 1) return span({class: 'text-error'}, '😞 Poor');
            if (val <= 2) return span({class: 'text-warning'}, '😐 Fair');
            if (val <= 3) return span({class: 'text-info'}, '🙂 Good');
            if (val <= 4) return span({class: 'text-success'}, '😊 Great');
            return span({class: 'text-primary'}, '🤩 Excellent!');
        }
    ),
    p({ class: 'text-sm font-mono opacity-70' },
        () => `Rating value: ${rating.value} / 5`
    )
);

$('#demo').insert(reactiveDemo);

Props

Sizes

Half Stars

Different Shapes