Stars

Stars — ряд звёзд для оценки от одной до max. Наведение подсвечивает звёзды до курсора, клик закрепляет оценку, повторный клик по выбранной звезде снимает её. В режиме readonly ряд только показывает оценку. Семантика — группа радиокнопок: стрелки меняют оценку с клавиатуры.

Статус: experimental · в системе с 2026-09 · интерактивность: conditional (по конфигурации)

Когда использовать

Оценка качества, площадки или отзыва одним числом от 1 до 5.
Показ уже выставленной оценки в карточке или строке таблицы — readonly.

Не использовать:

Двоичный выбор «нравится / не нравится» — это Toggle Button.
Непрерывная шкала или числовой ввод — это Slider или Input Number.
Сортировка или фильтр по рейтингу — это Select с вариантами.

Альтернативы:

toggle-button — одно двоичное состояние вместо шкалы
slider — непрерывное значение на дорожке

Оценка

Пять звёзд: наведение показывает будущую оценку, клик закрепляет её.

3 из 5

<!--
  🟢

  Оценка звёздами: наведение показывает будущую оценку, клик закрепляет,
  повторный клик по выбранной звезде снимает оценку.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Stars from "$lib/ui/Stars.svelte";

let value = $state(3);
</script>

<div style="display: flex; align-items: center; gap: var(--sp-2);">
	<Stars bind:value label={t("Оценка площадки")} />
	<span style="color: var(--c-text-muted); font-size: var(--fs-s);">{value || "—"} {t("из 5")}</span>
</div>

Только показ

Выставленная оценка в режиме readonly.

<!--
  🟢

  Выставленная оценка в режиме readonly: наведение и клик ничего не меняют.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Stars from "$lib/ui/Stars.svelte";
</script>

<Stars value={4} readonly label={t("Оценка отзыва")} />