Skip to content
Altitude Standalone Components

Rating Input

Rating Input Component

The Rating Input component provides an interactive star rating interface that allows users to select a rating from a predefined number of options.

Example

Default 5-star rating:

10-star rating with default value:

Required rating (with validation):

Disabled rating:

Usage

import RatingInput from "@altitude/ui/react/ui/rating-input";


export default function RatingExample() {
  // Uncontrolled component example
  return (
    <div>
      <label htmlFor="product-rating">Rate this product:</label>
      <RatingInput
        id="product-rating"
        name="product-rating"
        defaultValue={4}
        required={true}
      />
    </div>
  );


  // Controlled component example
  const [rating, setRating] = useState<number | null>(null);


  const handleRatingChange = (value: number | null) => {
    setRating(value);
    console.log(`Selected rating: ${value}`);
  };


  return (
    <div>
      <label htmlFor="service-rating">Rate our service:</label>
      <RatingInput
        id="service-rating"
        name="service-rating"
        value={rating}
        onChange={handleRatingChange}
      />
      <p>You selected: {rating || "No rating"}</p>
    </div>
  );
}

Props

PropTypeRequiredDescription
numberOfOptionsnumberNoNumber of rating options/stars (default: 5)
defaultValuenumber | nullNoDefault rating value (uncontrolled component)
valuenumber | nullNoCurrent rating value (controlled component)
onChangefunctionNoCallback when rating changes: (value: number | null) => void
idstringNoHTML ID for the input (default: “rating-input”)
namestringNoForm field name (default: “rating”)
disabledbooleanNoWhether the rating input is disabled (default: false)
requiredbooleanNoWhether a rating selection is required
classNamestringNoAdditional CSS classes for styling

Features

  • Flexible Rating Scale: Supports any number of rating options via the numberOfOptions prop
  • Controlled & Uncontrolled: Works with both component patterns
  • Accessible: Implemented as a radio group with proper ARIA attributes
  • Form Integration: Works seamlessly in forms with proper value handling and validation
  • Visual Feedback: Clear visual indication of selected rating

Accessibility

The Rating Input component is built with accessibility in mind:

  • Uses a radio group pattern for keyboard navigation
  • Provides appropriate ARIA labels for each rating option
  • Supports required attribute for form validation
  • Maintains focus properly during interaction