Components
Rating
A star rating component with half-star support and tooltips
Rating
The Rating component provides a star-based rating input with half-star support, tooltips, and full accessibility. Uses native radio inputs for keyboard navigation and screen reader support.
Import
import { Rating } from '@nqlib/nqui';Basic Usage
import { Rating } from '@nqlib/nqui';
export default function Example() {
return <Rating defaultValue={3} maxRating={5} />;
}Examples
Basic Rating
Controlled Rating
Rating: 0
Without Half Stars
Read Only
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Controlled value (0 to maxRating) |
defaultValue | number | 0 | Uncontrolled default value |
onValueChange | (value: number) => void | - | Callback when rating changes |
maxRating | number | 5 | Maximum rating value |
allowHalf | boolean | true | Allow half-star ratings |
showTooltip | boolean | true | Show tooltip on hover |
tooltipContent | (value: number) => React.ReactNode | - | Custom tooltip content |
disabled | boolean | false | Whether the rating is disabled |
starSize | string | "h-6 w-6" | Tailwind class for star size |
className | string | - | Additional CSS classes |
Accessibility
- Full keyboard navigation (Arrow keys, Space)
- ARIA attributes
- Screen reader support
- Focus management
Next Steps
- Learn about Form Components for other form elements