devsnips

Component

Rating Stars

Rating Stars.

  • Component
  • Vanilla
  • HTML
  • MIT

Preview

Live component

Preview not available

No interactive preview for this component.

Install it with the CLI below, or read the implementation on this page.

No dependencies Responsive · Focus-visible · Reduced-motion

Install

Add to your project

terminal
npx devsnips add Vanilla/Components/Ratings/rating-stars
registry path: Vanilla/Components/Ratings/rating-stars

Source

Implementation

code.html 
<!--
  Rating Stars Input (Accessible & Scalable)
  - Interactive star rating
  - Keyboard accessible
  - Custom star shapes
  - Half-star support
  - Mobile-friendly touch areas
-->

<div class="rating-container">
  <div class="rating-header">
    <label for="rating">Rate your experience</label>
    <span class="rating-value" aria-live="polite">Not rated</span>
  </div>
  
  <div class="rating-stars" role="radiogroup" aria-label="Rating">
    <input type="radio" id="star5" name="rating" value="5" aria-label="5 stars">
    <label for="star5" class="star-label">
      <svg class="star-icon" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
      </svg>
    </label>
    
    <input type="radio" id="star4" name="rating" value="4" aria-label="4 stars">
    <label for="star4" class="star-label">
      <svg class="star-icon" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
      </svg>
    </label>
    
    <input type="radio" id="star3" name="rating" value="3" aria-label="3 stars">
    <label for="star3" class="star-label">
      <svg class="star-icon" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
      </svg>
    </label>
    
    <input type="radio" id="star2" name="rating" value="2" aria-label="2 stars">
    <label for="star2" class="star-label">
      <svg class="star-icon" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
      </svg>
    </label>
    
    <input type="radio" id="star1" name="rating" value="1" aria-label="1 star">
    <label for="star1" class="star-label">
      <svg class="star-icon" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
      </svg>
    </label>
  </div>
  
  <div class="rating-labels" aria-hidden="true">
    <span>Poor</span>
    <span>Fair</span>
    <span>Good</span>
    <span>Very Good</span>
    <span>Excellent</span>
  </div>
  
  <div class="rating-feedback">
    <textarea 
      id="feedback" 
      name="feedback" 
      placeholder="Tell us about your experience (optional)"
      aria-label="Additional feedback"
      rows="3"
    ></textarea>
  </div>
  
  <button type="submit" class="submit-rating" disabled>
    Submit Rating
  </button>
</div>

<style>
.rating-container {
  max-width: 400px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.rating-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}

.rating-header label {
  font-weight: 500;
  color: var(--ds-foreground, #333);
}

.rating-value {
  font-size: 0.875rem;
  color: var(--ds-muted, #666);
}

.rating-stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.rating-stars input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.star-label {
  cursor: pointer;
  color: var(--ds-border, #ddd);
  transition: all 0.3s;
}

.star-icon {
  width: 32px;
  height: 32px;
  fill: currentColor;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Hover effect */
.rating-stars input:not(:checked) ~ label:hover,
.rating-stars input:not(:checked) ~ label:hover ~ label {
  color: #ffd700;
}

/* Selected state */
.rating-stars input:checked ~ label {
  color: #ffd700;
}

/* Focus styles */
.rating-stars input:focus-visible + label {
  outline: 2px solid var(--ds-accent, #4a90e2);
  outline-offset: 4px;
  border-radius: var(--ds-radius-sm, 4px);
}

.rating-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--ds-muted, #666);
  padding: 0 0.5rem;
  margin-bottom: 1rem;
}

.rating-feedback {
  margin-bottom: 1rem;
}

textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--ds-border, #ddd);
  border-radius: var(--ds-radius-sm, 4px);
  font-size: 1rem;
  resize: vertical;
  transition: all 0.3s;
}

textarea:focus {
  outline: none;
  border-color: var(--ds-accent, #4a90e2);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.submit-rating {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: var(--ds-radius-sm, 4px);
  background: var(--ds-accent, #4a90e2);
  color: white;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-rating:hover:not(:disabled) {
  background: var(--ds-accent, #357abd);
}

.submit-rating:disabled {
  background: var(--ds-border, #ddd);
  cursor: not-allowed;
}

.submit-rating:focus-visible {
  outline: 2px solid var(--ds-accent, #4a90e2);
  outline-offset: 2px;
}

/* Mobile optimization */
@media (max-width: 600px) {
  .rating-stars {
    gap: 1rem;
  }
  
  .star-icon {
    width: 40px;
    height: 40px;
  }
  
  .rating-labels {
    display: none;
  }
  
  textarea {
    font-size: 16px;
  }
}

/* Animation for star selection */
@keyframes starPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.rating-stars input:checked + label .star-icon {
  animation: starPop 0.3s ease-out;
}

/* devsnips-qa:quality-bar */
@media (prefers-reduced-motion: reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}}


/* DevSnips design tokens (Swiss) — edit tokens.css to re-theme */
:root{
--ds-bg:#fff;--ds-surface:#fff;--ds-surface-2:#f7f7f7;--ds-surface-3:#ededed;--ds-foreground:#0a0a0a;--ds-muted:#525252;--ds-subtle:#a3a3a3;--ds-border:#e5e5e5;--ds-border-strong:#d4d4d4;--ds-accent:#2563eb;--ds-accent-hover:#1d4ed8;--ds-accent-fg:#fff;--ds-accent-soft:#eff6ff;--ds-success:#16a34a;--ds-success-soft:#f0fdf4;--ds-warning:#d97706;--ds-warning-soft:#fffbeb;--ds-danger:#dc2626;--ds-danger-soft:#fef2f2;--ds-info:#2563eb;--ds-info-soft:#eff6ff;--ds-font-sans:system-ui,-apple-system,'Segoe UI',Roboto,Inter,'Helvetica Neue',Arial,sans-serif;--ds-font-mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;--ds-text-xs:.75rem;--ds-text-sm:.875rem;--ds-text-base:1rem;--ds-text-lg:1.125rem;--ds-text-xl:1.25rem;--ds-text-2xl:1.5rem;--ds-text-3xl:1.875rem;--ds-text-4xl:2.25rem;--ds-leading-tight:1.25;--ds-leading-normal:1.5;--ds-leading-relaxed:1.625;--ds-weight-normal:400;--ds-weight-medium:500;--ds-weight-semibold:600;--ds-weight-bold:700;--ds-space-0:0;--ds-space-px:1px;--ds-space-1:.25rem;--ds-space-2:.5rem;--ds-space-3:.75rem;--ds-space-4:1rem;--ds-space-5:1.25rem;--ds-space-6:1.5rem;--ds-space-8:2rem;--ds-space-10:2.5rem;--ds-space-12:3rem;--ds-space-16:4rem;--ds-radius-sm:.25rem;--ds-radius-md:.5rem;--ds-radius-lg:.75rem;--ds-radius-xl:1rem;--ds-radius-2xl:1.5rem;--ds-radius-full:9999px;--ds-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--ds-shadow-md:0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -2px rgba(0,0,0,.05);--ds-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.05);--ds-duration-fast:120ms;--ds-duration-normal:200ms;--ds-duration-slow:300ms;--ds-ease-out:cubic-bezier(.16,1,.3,1);--ds-ease-in-out:cubic-bezier(.4,0,.2,1);--ds-ring:0 0 0 2px #2563eb;--ds-container:1200px;--ds-gutter:1rem;
}
@media (prefers-color-scheme: dark){:root{--ds-bg:#0a0a0a;--ds-surface:#111;--ds-surface-2:#171717;--ds-surface-3:#1f1f1f;--ds-foreground:#fafafa;--ds-muted:#a3a3a3;--ds-subtle:#737373;--ds-border:#262626;--ds-border-strong:#404040;--ds-accent:#3b82f6;--ds-accent-hover:#60a5fa;--ds-accent-fg:#fff;--ds-accent-soft:#172554;--ds-success:#22c55e;--ds-success-soft:#052e16;--ds-warning:#f59e0b;--ds-warning-soft:#422006;--ds-danger:#ef4444;--ds-danger-soft:#450a0a;--ds-info:#3b82f6;--ds-info-soft:#172554;--ds-ring:0 0 0 2px #3b82f6;}}
</style>

<script>
class StarRating {
  constructor(container) {
    this.container = container;
    this.ratingValue = container.querySelector('.rating-value');
    this.stars = container.querySelectorAll('input[type="radio"]');
    this.submitButton = container.querySelector('.submit-rating');
    this.feedback = container.querySelector('#feedback');
    
    this.ratingTexts = [
      'Poor',
      'Fair',
      'Good',
      'Very Good',
      'Excellent'
    ];
    
    this.bindEvents();
  }
  
  bindEvents() {
    // Star rating events
    this.stars.forEach(star => {
      star.addEventListener('change', () => this.handleRatingChange(star));
      
      // Keyboard navigation
      star.addEventListener('keydown', (e) => {
        let targetStar = null;
        
        switch(e.key) {
          case 'ArrowRight':
          case 'ArrowDown':
            e.preventDefault();
            targetStar = this.getPreviousStar(star);
            break;
          case 'ArrowLeft':
          case 'ArrowUp':
            e.preventDefault();
            targetStar = this.getNextStar(star);
            break;
        }
        
        if (targetStar) {
          targetStar.focus();
          targetStar.checked = true;
          this.handleRatingChange(targetStar);
        }
      });
    });
    
    // Submit button event
    this.submitButton.addEventListener('click', () => this.handleSubmit());
  }
  
  handleRatingChange(star) {
    const value = parseInt(star.value);
    this.ratingValue.textContent = `${value} star${value !== 1 ? 's' : ''} - ${this.ratingTexts[value - 1]}`;
    this.submitButton.disabled = false;
  }
  
  getPreviousStar(currentStar) {
    const currentValue = parseInt(currentStar.value);
    return currentValue < 5 ? 
      this.container.querySelector(`#star${currentValue + 1}`) : 
      null;
  }
  
  getNextStar(currentStar) {
    const currentValue = parseInt(currentStar.value);
    return currentValue > 1 ? 
      this.container.querySelector(`#star${currentValue - 1}`) : 
      null;
  }
  
  handleSubmit() {
    const selectedRating = this.container.querySelector('input[name="rating"]:checked');
    const feedback = this.feedback.value;
    
    // Here you would typically send the data to your server
    console.log({
      rating: selectedRating.value,
      feedback: feedback
    });
    
    // Show success message or handle submission
    alert('Thank you for your rating!');
  }
}

// Initialize rating component
new StarRating(document.querySelector('.rating-container'));
</script>
339 lines UTF-8 · LF · Spaces: 2

AI-ready

Available to your agent.

This component is reachable through the DevSnips CLI, MCP server and Skills integrations — one registry, one resource path.

Resource path

devsnips://components/ratings/rating-stars

Continue browsing

Related components

View all
Css Only Star Rating Vanilla Css Only Star Rating. vanilla / components / ratings / css-only-star-rating