Rating
Компонент звёздного рейтинга. Поддерживает интерактивный ввод оценки, режим «только для чтения», половинные звёзды (allowHalf) и сброс значения по повторному клику (allowClear). Поведение по умолчанию — неконтролируемое с defaultValue; для контролируемого использования передайте value + onChange.
Когда использовать
- Оценка сущности пользователем: отзыв о товаре, качестве услуги, контента.
- Отображение агрегированного рейтинга в readonly-режиме (карточка товара, профиль исполнителя).
Когда не нужен: многокритериальная оценка (несколько факторов) — стройте форму с несколькими Rating или отдельным UI. NPS-шкала 0–10 — используйте другой компонент.
Анатомия
Appearance
Цвет заполненных звёзд: primary — брендовый акцент (дефолт); red, orange, yellow, green, blue, violet, pink — семантические/декоративные варианты под контекст.
Size
xs — плотные карточки и строки списков; s — дефолт для форм отзывов и профилей.
Установка
pnpm add @cloud-ru/ds-ratingimport { Rating } from '@cloud-ru/ds-rating'Примеры использования
Базовый рейтинг
tsx
import { Rating } from '@cloud-ru/ds-rating';
export function Basic() {
return <Rating count={5} defaultValue={3} allowHalf={false} allowClear={false} readonly={false} />;
}Readonly
tsx
import { Rating } from '@cloud-ru/ds-rating';
export function Readonly() {
return <Rating count={5} defaultValue={4} readonly allowHalf={false} allowClear={false} />;
}Половинные звёзды
tsx
import { Rating } from '@cloud-ru/ds-rating';
export function HalfStars() {
return <Rating count={5} defaultValue={3.5} allowHalf allowClear={false} readonly={false} />;
}Props
Types
Props
RatingProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
allowClear | boolean | false | no | Разрещает сброс рейтинга при повторном нажатии на звезду |
allowHalf | boolean | false | no | Показывать или нет рейтинг в виде половины звезды |
appearance | "blue" | "green" | "neutral" | "orange" | "pink" | "primary" | "red" | "violet" | "yellow" | yellow | no | Внешний вид (цветовая схема) |
className | string | — | no | CSS-класс |
count | number | 5 | no | Общее количество звезд |
data-test-id | string | — | no | |
defaultValue | number | 0 | no | Количество звезд, заполненных по умолчанию |
onChange | ((value: number) => void) | — | no | Колбек, вызываемый на смену состояния |
readonly | boolean | false | no | Является ли поле доступным на изменение |
size | "s" | "xs" | s | no | Размер |
value | number | — | no | Значение количества звезд в случае необходимости управления |