Rating input

Sets a star rating with radio controls.

rating-input-demo.tsx

"use client";import { RatingInput } from "@/components/vip-ui/rating-input";export function RatingInputDemo() {  return (    <RatingInput      label="Rate this item"      name="rating"      defaultValue={3}      className="w-full max-w-sm"    />  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-rating-input.json

Custom icon

rating-input-icon-demo.tsx

"use client";import { HeartIcon } from "@phosphor-icons/react";import { RatingInput } from "@/components/vip-ui/rating-input";export function RatingInputIconDemo() {  return (    <RatingInput      label="How much did you enjoy it?"      icon={HeartIcon}      defaultValue={4}      className="w-full max-w-sm"    />  );}

Read only

rating-input-read-only-demo.tsx

"use client";import { RatingInput } from "@/components/vip-ui/rating-input";export function RatingInputReadOnlyDemo() {  return (    <RatingInput      label="Average rating"      defaultValue={4}      isReadOnly      className="w-full max-w-sm"    />  );}

Required

The error shows after the first submit. Also install Form and Button.

rating-input-required-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import { Form } from "@/components/vip-ui/form";import { RatingInput } from "@/components/vip-ui/rating-input";export function RatingInputRequiredDemo() {  return (    <Form      className="w-full max-w-sm"      onSubmit={(event) => {        event.preventDefault();      }}    >      <RatingInput        label="Rate your order"        name="rating"        isRequired        errorMessage="Select a rating."      />      <Button type="submit">Send review</Button>    </Form>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria RadioGroup (opens in a new tab).

label: ReactNode: The visible label of the group. Without it, pass aria-label.
max: number = 5: Number of steps. Use a positive whole number.
icon: Icon = StarIcon: A Phosphor icon for each step. Steps up to the rating use the fill weight.
value: number: The selected rating, controlled. 0 means no rating. Use a number from 1 to max for a selection.
defaultValue: number = 0: The selected rating at first, uncontrolled. 0 means no rating.
onValueChange: (value: number) => void: Called when a step is selected.