value- Type
number- Default
0- Description
- Current rating score (out of 5).
Components / Inputs
Rating
மதிப்பீடு
Rating components allow users to review and submit quantitative ratings using interactive visual glyphs (stars). Commonly used in service satisfaction forms.
மதிப்பீட்டுக் கூறுகள் பயனர்கள் சேவைகளின் திருப்தி நிலையை நட்சத்திரக் குறியீடுகள் மூலம் மதிப்பிட உதவும்.
Variants
Component preview
Rating variantsமதிப்பீடு அளவுகள்Anatomy
Structure
Anatomy
3 parts documented for implementation and review.
1
Star Glyphs
நட்சத்திரக் குறியீடுகள்required<svg>Five interactive glyphs for capturing rates. Active items use primary-filled visual accent states, while inactive items use muted boundaries.
2
Bilingual Text Summary
இருமொழிச் சுருக்கம்Optional label providing direct textual feedback translating scores to words (e.g. 'மிக நன்று / Very Good').
3
Interactive Touch Targets
தொடு இலக்கு எல்லைrequiredStar buttons must possess at least 44x44px padding bounds to accommodate touchscreen interaction.
API
Props
onChange- Type
(value: number) => void- Default
- -
- Description
- Triggered upon rating selection.
readonly- Type
boolean- Default
false- Description
- Disable interactive modification.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current rating score (out of 5). |
onChange | (value: number) => void | - | Triggered upon rating selection. |
readonly | boolean | false | Disable interactive modification. |
Usage guidance
- Provide readable screen reader assistance (e.g. aria-label="Rate 4 out of 5 stars").
- Always couple score inputs with validation labels in form layouts to support error boundaries.
Best practices
Embed dynamic text values alongside star counts
நட்சத்திரங்களுடன் உரை விளக்கத்தையும் இணையுங்கள்
Providing a text label translating visual values helps confirm score choices cleanly.
மதிப்பீட்டுடன் சொற்களையும் காட்டுவது பயனருக்கு தங்களின் தேர்வை உறுதிப்படுத்த உதவும்.
Don't use tiny star interactive targets on touch screens
தொடுதிரைகளில் மிகச் சிறிய நட்சத்திரங்களை வைக்காதே
Smaller touch bounds result in fat-finger input selection mistakes.
சிறிய தொடு எல்லைகள் தவறான மதிப்பீடு தேர்விற்கு வழிவகுக்கும்.