Rate

Installation

npx vayu-ui init #one time only

npx vayu-ui add rate

npx vayu-ui add -t rate #with test case needs

Usage

Rate Examples

Basic Usage

Current value: 3

Read Only

Disabled

Sizes

Small

Medium

Large

XLarge

With Labels

Product Rating

Good

Rate the product quality.

With Value Display

3.5 / 5

Custom Icon

Custom Filled & Half Icons

Using custom icons for empty, filled, and half states

Error State

Rating Required

Please select a rating

Half Star Support

Hover on the left or right half of a star to select half values

Full Star Only

<Rate defaultValue={3.5} allowHalf>
  <Rate.Container>
    <div>
      <Rate.Label>Service Rating</Rate.Label>
      <Rate.Description>How would you rate our service?</Rate.Description>
    </div>
    <Rate.Value showTotal />
  </Rate.Container>
  <Rate.Stars />
  <Rate.TextLabel />
</Rate>

<Rate defaultValue={4} count={5} size="lg" error>
  <Rate.Container>
    <Rate.Label>Product Quality</Rate.Label>
  </Rate.Container>
  <Rate.Stars />
  <Rate.ErrorText>This rating is required.</Rate.ErrorText>
</Rate>

Anatomy

import { Rate } from '@/components/ui/Rate';

<Rate>
  <Rate.Container>
    <Rate.Label />
    <Rate.Description />
    <Rate.Value />
  </Rate.Container>
  <Rate.Stars />
  <Rate.TextLabel />
  <Rate.ErrorText />
</Rate>;

Accessibility

Keyboard Support: Full keyboard navigation support. Users can use Tab to focus on the rating component, and ArrowRight / ArrowLeft or ArrowUp / ArrowDown to adjust the rating. Home and End keys set the minimum and maximum values. Space or Enter toggles the rating.
ARIA Attributes: The root uses role="group" with an aria-labelledby linking to the label. The input representation uses role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow communicating the state.
Focus Behavior: Focus is managed intelligently on the root input level, showing distinct focus rings without losing screen reader context.

When focused, a screen reader will announce the group label or description. As the user navigates the component via keyboard or arrow keys, the screen reader uses the slider role to immediately read out the current numeric value (e.g., "3.5 out of 5"). Descriptive text labels associated through Rate.TextLabel are also exposed to provide semantic context.

Component Folder Structure

components/ui/Rate/
├── index.ts
├── types.ts
├── hooks.ts
├── Rate.tsx
├── RateContainer.tsx
├── RateDescription.tsx
├── RateErrorText.tsx
├── RateLabel.tsx
├── RateStars.tsx
└── RateValue.tsx

Props

Rate

The main root component that handles context and state.

Name	Type	Default	Description
count	`number`	`5`	The total number of stars to display.
value	`number`	-	The controlled selected value.
defaultValue	`number`	`0`	The default selected value for uncontrolled usage.
onChange	`(value: number) => void`	-	Callback fired when the value changes.
allowHalf	`boolean`	`true`	Allows half-star ratings.
allowClear	`boolean`	`true`	Allows resetting the rating by clicking the active value again.
disabled	`boolean`	`false`	Disables the rating component, preventing interactions.
readOnly	`boolean`	`false`	Sets component to read-only but keeps it focusable.
size	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	The visual size of the stars.
icon	`ReactElement`	`<DefaultStar />`	Default icon for the unselected state.
filledIcon	`ReactElement`	-	Icon for the fully selected state. Falls back to `icon`.
halfIcon	`ReactElement`	-	Icon for the half-selected state. Falls back to `filledIcon`.
error	`boolean`	`false`	Displays the component in an error state.
labels	`string[]`	-	Formatted labels mapping to each step of the rating.

Rate.Container

A layout wrapper to easily group labels, descriptions, and value displays.

Name	Type	Default	Description
children	`ReactNode`	-	The content to render inside the container.
className	`string`	-	Custom CSS classes.

Rate.Label

The accessible label for the rating component.

Name	Type	Default	Description
children	`ReactNode`	-	The label text.
className	`string`	-	Custom CSS classes.

Rate.Description

Supplementary text description for the rating component.

Name	Type	Default	Description
children	`ReactNode`	-	The description text.
className	`string`	-	Custom CSS classes.
id	`string`	-	Custom ID for linking with `aria-describedby` manually if needed.

Rate.Stars

The container rendering the actual interactive star SVGs.

Name	Type	Default	Description
className	`string`	-	Custom CSS classes.
aria-label	`string`	-	Custom aria-label for the inner group of stars.

Rate.Value

Displays the active numeric value of the rating.

Name	Type	Default	Description
showTotal	`boolean`	`false`	If true, formats as "current / total" (e.g. 4/5).
decimals	`number`	-	The number of decimal places to show.
className	`string`	-	Custom CSS classes.

Rate.TextLabel

Displays the string label mapping to the current active value (uses labels array from root).

Name	Type	Default	Description
className	`string`	-	Custom CSS classes.

Rate.ErrorText

Displays an error message, only visible when error prop is true on the root.

Name	Type	Default	Description
children	`ReactNode`	-	The error message text.
className	`string`	-	Custom CSS classes.
id	`string`	-	Custom ID for ARIA mapping.

Rate

Rate Examples

On this page