Rating

What this example shows

SvRating - a production review widget: an interactive star input with a live summary, a read-only aggregate display, and half-star precision. Copy-paste ready.

Imports, features and API used

Imports: @svgrid/grid

Source code (311-rating.svelte)

<script lang="ts">
  /**
   * SvRating - a production review widget: an interactive star input with a live
   * summary, a read-only aggregate display, and half-star precision. Copy-paste
   * ready.
   */
  import { SvRating } from '@svgrid/grid'

  let myRating = $state(0)
  const labels = ['', 'Terrible', 'Poor', 'Average', 'Good', 'Excellent']
  const breakdown = [
    { stars: 5, pct: 68 },
    { stars: 4, pct: 20 },
    { stars: 3, pct: 7 },
    { stars: 2, pct: 3 },
    { stars: 1, pct: 2 },
  ]
</script>

<div class="wrap">
  <header>
    <h2>Rating</h2>
    <p>A star input (WAI-ARIA slider) with hover preview, keyboard and half-star precision - reviews, feedback, quality scores.</p>
  </header>

  <section class="block">
    <h3>Leave a review</h3>
    <div class="rate">
      <SvRating value={myRating} onChange={(v) => (myRating = v)} size="lg" />
      <span class="lbl">{myRating ? labels[Math.ceil(myRating)] : 'Tap a star'}</span>
    </div>
  </section>

  <section class="block">
    <h3>Aggregate (4.5 average, read-only)</h3>
    <div class="agg">
      <div class="score"><span class="big">4.5</span><SvRating value={4.5} allowHalf readonly /></div>
      <div class="bars">
        {#each breakdown as b (b.stars)}
          <div class="bar"><span class="s">{b.stars}★</span><div class="track"><span style:width={`${b.pct}%`}></span></div><span class="p">{b.pct}%</span></div>
        {/each}
      </div>
    </div>
  </section>
</div>

<style>
  .wrap { padding: 20px; max-width: 560px; display: flex; flex-direction: column; gap: 22px; }
  header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
  header p { margin: 0; color: var(--sg-muted, #64748b); font-size: 13.5px; line-height: 1.5; }
  .block h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sg-muted, #64748b); }
  .rate { display: flex; align-items: center; gap: 12px; }
  .lbl { font-size: 14px; font-weight: 600; color: var(--sg-muted, #64748b); }
  .agg { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
  .score { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .score .big { font-size: 34px; font-weight: 800; line-height: 1; }
  .bars { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
  .bar { display: flex; align-items: center; gap: 8px; font-size: 12px; }
  .bar .s { width: 26px; color: var(--sg-muted, #64748b); }
  .bar .p { width: 34px; text-align: right; color: var(--sg-muted, #94a3b8); }
  .track { flex: 1; height: 7px; border-radius: 999px; background: var(--sg-border, #e2e8f0); overflow: hidden; }
  .track span { display: block; height: 100%; background: var(--sg-rating-on, #f59e0b); }
</style>

View this example on GitHub

Related documentation

• SvRating

Related articles

• Migrating a Svelte 4 Table Component to Svelte 5 - A concept-by-concept guide to porting a hand-rolled Svelte 4 data table to Svelte 5 runes - props, reactivity, stores, slots, events, and when to stop hand-rolling entirely.
• Migrating from DataTables.net to a Svelte Data Grid - A practical migration guide from jQuery DataTables to SvGrid - how column definitions, server-side data, custom rendering, and selection map across, with working code for each step.
• Migrating from ag-grid-react to a Svelte Stack - A practical field guide for porting ag-grid-react screens to SvGrid - column defs, cell renderers, server-side data, and the React-to-Svelte reactivity shift.

More Buttons & Toggles examples

• Buttons & toggles - The UI kit press/toggle primitives: SvButton (variants/sizes/loading), SvRepeatButton (hold-to-repeat), SvToggleButton, SvSwitchButton, SvCheckBox (+ indeterminate), SvRadioGroup (arrow-key nav) and SvRating (half stars). Theme-driven, standalone or as grid cell controls.
• Button group - SvButtonGroup: a segmented button bar - single-select (radio semantics, a view switcher), multi-select (a toggle set / formatting toolbar) or plain actions. Roving tabindex + arrow keys, and the shared editor contract (label, validation, dir/RTL).
• Button - SvButton in production: a toolbar (variants primary/secondary/outline/ghost/danger), sizes, icon slots, a loading state and a full-width CTA. Copy-paste-ready blocks.
• Repeat button - SvRepeatButton: hold-to-repeat with acceleration - a quantity stepper and a volume control block.
• Toggle button - SvToggleButton: a pressed on/off button (aria-pressed) - a text-formatting toolbar and pin / live state toggles.