EquaRating

Last Verified: 2026-05-20 | Storybook source: equa-patternlib-nextjs/stories/EquaRating.stories.tsx, Line: 6

Purpose

Rating display and input controls.

Storybook

Story	Reference
Default	Storybook
Interactive	Storybook
Sizes	Storybook
Half Stars	Storybook
Heart Icon	Storybook
Read Only	Storybook
Disabled	Storybook
Ten Stars	Storybook
Custom Colors	Storybook
Product Review	Storybook
All Variants	Storybook

API And Props

Prop or Control	Source	Notes
`max`	Storybook control	See source story for accepted values
`size`	Storybook control	See source story for accepted values
`icon`	Storybook control	See source story for accepted values
`readOnly`	Storybook control	See source story for accepted values
`disabled`	Storybook control	See source story for accepted values
`allowHalf`	Storybook control	See source story for accepted values
`showValue`	Storybook control	See source story for accepted values

Sources:

equa-patternlib-nextjs/src/components/rating/rating.tsx, Line: 5
equa-patternlib-nextjs/src/components/rating/index.ts
equa-patternlib-nextjs/stories/EquaRating.stories.tsx, Line: 6

Figma

UNVERIFIED — requires Figma node assignment

Screenshots

State	Asset
Equa dark theme
Light theme

Usage Notes

Prefer this component over local one-off UI for matching product states.
Keep new variants represented in Storybook before adding docs references here.
Use token-backed colors, spacing, radius, and shadows from Foundations.

Accessibility Notes

Preserve keyboard and focus behavior from the source component.
Any icon-only controls must provide an accessible label in consuming product code.
Validate color contrast in both Equa dark and light theme screenshots before release.

EquaRadio EquaRolesPermissions