تقييم

Rating

تقييم بالنجوم متاح الوصول في React يعمل كحقل إدخال أو عرض للقراءة فقط، بدقّة نصف نجمة وأحجام ودرجة العلامة ودعم كامل للوحة المفاتيح.

افتح في ستوري بوك ↗

يجمع Rating تقييمًا بالنجوم أو يعرضه. استخدم readOnly للعرض فقط وallowHalf لأنصاف النجوم وtone="brand" للأخضر السعودي.

متى تستخدمه

استخدم Rating لجمع رضا المستفيد بعد تقديم الخدمة، أو لعرض متوسّط الدرجات. فعّل readOnly للعرض وallowHalf حين تحتاج المتوسّطات دقّة أكبر. أبقِ المقياس على خمس نجوم؛ فالمستخدمون يعرفونه.

لسؤال بخيارات مسمّاة، مثل «ما مدى سهولة الخدمة؟»، يعطي RadioGroup إجابات أوضح.

أمثلة

قيّم خدمة

قيّم هذه الخدمة

دقّة نصف نجمة

الجودة

متوسّط للقراءة فقط

متوسط التقييم

مبني على 248 تقييمًا

الأحجام

صغير

متوسط

كبير

الخصائص

الخصائص التي يعرّفها Rating. سمات العنصر الأصلي تمرّ كما هي.

الخاصية	النوع	الوصف
`size`	`"sm" \| "md" \| "lg"`
`value`	`number`	Controlled value (0…max). `.5` increments are allowed when `allowHalf`.
`defaultValue`	`number`	Uncontrolled initial value. Defaults to 0.
`onValueChange`	`(value: number) => void`	Fires with the chosen rating.
`max`	`number`	Number of stars. Defaults to 5.
`allowHalf`	`boolean`	Allow half-star (`.5`) precision.
`readOnly`	`boolean`	Display only - no interaction, exposed as `role="img"`.
`disabled`	`boolean`	Non-interactive and dimmed.
`label`	`react.ReactNode`	Visible field label.
`helperText`	`react.ReactNode`	Hint shown below the field. Hidden while an error message is showing.
`errorMessage`	`react.ReactNode`	Message shown below the field when `error` is true.
`error`	`boolean`	Marks the field invalid: sets `aria-invalid` and error styling.
`tone`	`"default" \| "brand"`	SDGA Style axis. `default` (gold) · `brand` (SA green). Recolor per instance via the `--ddga-rating-color` CSS variable.
`icon`	`react.ReactNode`	Symbol rendered instead of the default star (e.g. a heart). Used for both the empty and filled layers - fill/empty colors come from CSS, so pass an icon that uses `currentColor`. Defaults to the SDGA star.
`formatValueText`	`(value: number, max: number) => string`	Builds the accessible value text / read-only label. Defaults to `"{value} out of {max} stars"`. Override for localization.
`id`	`string`
`className`	`string`
`aria-label`	`string`	Defines a string value that labels the current element.
`aria-labelledby`	`string`	Identifies the element (or elements) that labels the current element.

إمكانية الوصول

التقييم التفاعلي يحمل الدور slider: مفاتيح الأسهم تغيّر الدرجة، وHome وEnd يقفزان إلى الطرفين، وaria-valuetext يعلن القيمة مع تسميتها. التقييم للقراءة فقط يُعرض صورةً باسم متاح، فيُعلن دون أن يكون قابلًا للتركيز.

سمِّ الأداة عبر label أو aria-label، واستخدم رسالة الخطأ لشرح التقييم الناقص.