Skip to content
Altitude Standalone Components

Rating Input Field

Rating Input Field Component

The Rating Input Field component provides a complete form field for collecting star ratings with built-in label, validation, and error handling.

Example

How would you rate your experience with this product?

Rate your overall satisfaction with our service

Please provide a rating

Usage

import RatingInputField from "@altitude/ui/react/components/fields/rating-input-field";


export default function ReviewForm() {
  const [rating, setRating] = React.useState<number | null>(null);


  return (
    <form>
      {/* Uncontrolled component */}
      <RatingInputField
        id="product-rating"
        name="product-rating"
        label="Rate this product"
        helperText="How would you rate your experience with this product?"
        required={true}
        numberOfOptions={5}
        defaultValue={3}
      />


      {/* Controlled component */}
      <RatingInputField
        id="service-rating"
        name="service-rating"
        label="Rate our service"
        value={rating}
        onChange={setRating}
        numberOfOptions={5}
      />


      {/* More form fields */}
      <button type="submit">Submit Review</button>
    </form>
  );
}

Props

PropTypeRequiredDescription
idstringNoHTML ID for the field
namestringNoHTML name attribute for the field
labelstringNoLabel text for the field
helperTextstringNoHelper text displayed below the field
errorMessagestringNoError message displayed when aria-invalid is true
requiredbooleanNoWhether the field is required (default: false)
aria-invalidbooleanNoWhether the field has an error (default: false)
disabledbooleanNoWhether the field is disabled (default: false)
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

Implementation Details

The Rating Input Field component combines a field wrapper and a rating input component:

  • Uses FieldWrapper to handle labels, error states, and helper text
  • Uses the base RatingInput UI component for the star rating interaction
  • Supports both controlled and uncontrolled component patterns
  • Automatically handles validation states and error messaging