Inputs

Star Rating

Оценка звёздами без JS: звёзды идут в разметке обратно и разворачиваются flex, поэтому подсветка работает одним селектором.

rating
stars
radio
no-js

Превью

1440pxHost theme

Использовать с AI

1. Скопируйте ссылку.
2. Напишите агенту своими словами и вставьте её в предложение.
3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/rating-001

Вопрос

Оценка

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «rating-001» (Star Rating) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/rating-001.json

Registry item: https://vibeui.ru/r/rating-001.json
Ставится в: components/vibeui/rating-001.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Оценка звёздами без JS: звёзды идут в разметке обратно и разворачиваются flex, поэтому подсветка работает одним селектором.

Оценка звёздами: наведение показывает будущий выбор, подпись оценки меняется без JS. Ноль зависимостей, один файл, клиентского JS нет.

## 3. Как использовать
import { Rating001 } from "@/components/vibeui/rating-001"

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-rating-001-* и не подменять её токенами вашей темы
- обратный порядок звёзд в разметке с row-reverse: без него ~ красит не ту сторону
- радиокнопки: выбор, клавиатура и отправка формы достаются от браузера
- aria-label на каждой звезде — «★» не читается как оценка
- подсветку будущего выбора при наведении вместо застывшего значения
- подпись оценки словами: цифра без слова ничего не уточняет

## 6. Можно менять
- legend, max и defaultValue
- массив hints — подписи оценок
- акцент через проп accent
- размер звёзд

## 7. Правила
- Правила подписи выписаны на десять оценок: для более длинной шкалы добавьте строки CSS.
- Уникальный name обязателен: две шкалы с одним именем станут одной группой.
- Полузвёзды не поддерживаются: для них нужен ползунок или свой JS.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/rating-001.json

https://vibeui.ru/r/rating-001.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-rating-001-*. Серверный: хуков нет, состояние держат радиокнопки. Порядок звёзд в разметке обратный, а flex-direction: row-reverse возвращает их на место — только так соседний селектор ~ красит звёзды левее. Подпись оценки тоже выбирается CSS: видна строка, чей value отмечен.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Rating001Props = Omit<
  ComponentPropsWithoutRef<"fieldset">,
  "children" | "defaultValue"
> & {
  legend?: string
  name?: string
  max?: number
  defaultValue?: number
  hints?: string[]
  accent?: string
}

// Идея компонента: оценка звёздами без JS. Каждая звезда — радиокнопка, поэтому
// выбор, клавиатура и отправка формы работают сами. Звёзды идут в разметке в
// обратном порядке и разворачиваются flex-direction: только так соседний
// селектор ~ закрашивает все звёзды левее наведённой без единой строки кода.
const STYLES = `
:where([data-vibeui-block="rating-001"]){
--vibeui-rating-001-bg:oklch(1 0 0);
--vibeui-rating-001-fg:oklch(0.24 0.014 265);
--vibeui-rating-001-muted:oklch(0.58 0.014 265);
--vibeui-rating-001-border:oklch(0.9 0.006 265);
--vibeui-rating-001-empty:oklch(0.88 0.008 265);
--vibeui-rating-001-accent:oklch(0.72 0.16 75);
--vibeui-rating-001-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="rating-001"]{
display:flex;flex-direction:column;gap:0.375rem;
width:100%;max-width:18rem;box-sizing:border-box;margin:0;padding:0.875rem;
background:var(--vibeui-rating-001-bg);
border:1px solid var(--vibeui-rating-001-border);border-radius:0.875rem;
font-family:var(--vibeui-rating-001-font);color:var(--vibeui-rating-001-fg);
}
[data-vibeui-block="rating-001"] legend{float:left;width:100%;padding:0;margin-bottom:0.375rem;font-size:0.875rem;font-weight:650}
/* Обратный порядок в разметке: тогда ~ закрашивает звёзды левее наведённой. */
[data-vibeui-block="rating-001"] [data-part="stars"]{
display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:0.125rem;
}
[data-vibeui-block="rating-001"] input{position:absolute;opacity:0;pointer-events:none}
[data-vibeui-block="rating-001"] [data-part="star"]{
cursor:pointer;font-size:1.5rem;line-height:1;color:var(--vibeui-rating-001-empty);
padding:0 0.0625rem;border-radius:0.25rem;
}
/* Отмеченная звезда и все левее неё: соседи по ~ идут в обратном порядке. */
[data-vibeui-block="rating-001"] label:has(input:checked) [data-part="star"],
[data-vibeui-block="rating-001"] label:has(input:checked) ~ label [data-part="star"]{color:var(--vibeui-rating-001-accent)}
/* Пока курсор в группе, показываем не выбор, а то, что будет выбрано. */
[data-vibeui-block="rating-001"] [data-part="stars"]:hover [data-part="star"]{color:var(--vibeui-rating-001-empty)}
[data-vibeui-block="rating-001"] [data-part="stars"]:hover label:hover [data-part="star"],
[data-vibeui-block="rating-001"] [data-part="stars"]:hover label:hover ~ label [data-part="star"]{color:var(--vibeui-rating-001-accent)}
[data-vibeui-block="rating-001"] input:focus-visible + [data-part="star"]{outline:2px solid var(--vibeui-rating-001-accent);outline-offset:1px}
/* Подпись оценки тоже без JS: видна та строка, чей value отмечен. */
[data-vibeui-block="rating-001"] [data-part="hint"]{display:none;margin:0;font-size:0.75rem;color:var(--vibeui-rating-001-muted)}
[data-vibeui-block="rating-001"] [data-part="hints"]{min-height:1rem}
[data-vibeui-block="rating-001"]:has(input[value="1"]:checked) [data-part="hint"][data-value="1"]{display:block}
[data-vibeui-block="rating-001"]:has(input[value="2"]:checked) [data-part="hint"][data-value="2"]{display:block}
[data-vibeui-block="rating-001"]:has(input[value="3"]:checked) [data-part="hint"][data-value="3"]{display:block}
[data-vibeui-block="rating-001"]:has(input[value="4"]:checked) [data-part="hint"][data-value="4"]{display:block}
[data-vibeui-block="rating-001"]:has(input[value="5"]:checked) [data-part="hint"][data-value="5"]{display:block}
[data-vibeui-block="rating-001"]:has(input[value="6"]:checked) [data-part="hint"][data-value="6"]{display:block}
[data-vibeui-block="rating-001"]:has(input[value="7"]:checked) [data-part="hint"][data-value="7"]{display:block}
[data-vibeui-block="rating-001"]:has(input[value="8"]:checked) [data-part="hint"][data-value="8"]{display:block}
[data-vibeui-block="rating-001"]:has(input[value="9"]:checked) [data-part="hint"][data-value="9"]{display:block}
[data-vibeui-block="rating-001"]:has(input[value="10"]:checked) [data-part="hint"][data-value="10"]{display:block}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="rating-001"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_HINTS = ["Плохо", "Так себе", "Нормально", "Хорошо", "Отлично"]

/**
 * Оценка звёздами на радиокнопках: выбор и клавиатура без JS.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Rating001({
  legend = "Оцените компонент",
  name = "vibeui-rating-001",
  max = 5,
  defaultValue = 4,
  hints = DEFAULT_HINTS,
  accent,
  className,
  style,
  ...props
}: Rating001Props) {
  const stars = Array.from({ length: max }, (_, index) => max - index)

  const palette = {
    ...(accent ? { "--vibeui-rating-001-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-rating-001" precedence="medium">
        {STYLES}
      </style>
      <fieldset
        {...props}
        data-vibeui-block="rating-001"
        className={className}
        style={palette}
      >
        <legend>{legend}</legend>
        <div data-part="stars">
          {stars.map((value) => (
            <label key={value} aria-label={`${value} из ${max}`}>
              <input
                type="radio"
                name={name}
                value={value}
                defaultChecked={value === defaultValue}
              />
              <span data-part="star" aria-hidden="true">
                ★
              </span>
            </label>
          ))}
        </div>
        <div data-part="hints" aria-live="polite">
          {hints.map((hint, index) => (
            <p key={hint} data-part="hint" data-value={index + 1}>
              {hint}
            </p>
          ))}
        </div>
      </fieldset>
    </>
  )
}