Rating
An interactive star rating component for user feedback with hover preview and keyboard navigation.
Installation
tsx
import { Rating } from "madagent";Default
Sizes
With Description
Rate the overall quality of this product
Read Only
Disabled
Custom Max
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Controlled rating value |
defaultValue | number | 0 | Initial rating value (uncontrolled) |
onChange | (value: number) => void | - | Called when the rating changes |
max | number | 5 | Maximum number of stars |
size | "sm""md""lg" | "md" | Star size |
disabled | boolean | false | Disables the rating |
readOnly | boolean | false | Shows rating without interaction |
label | ReactNode | - | Label text next to the stars |
description | string | - | Description text below the control |
name | string | - | Form input name for hidden input |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
هل توصي بهذا المنتج؟
Usage
tsx
<div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
<Rating label="تقييم المنتج" defaultValue={4} />
<Rating label="جودة الخدمة" defaultValue={3} />
<Rating label="التوصية" description="هل توصي بهذا المنتج؟" defaultValue={5} />
</div>