Rating Input Form Field

Problem/Feature Description

The product team needs a star rating input for a feedback collection form on the workspace dashboard. Currently the form has text areas and checkboxes, but the UX team wants a 1–5 star rating widget so users can quickly rate their experience with a tile. The form was built with the project's shared form system and existing field components already follow consistent patterns for labels, errors, and helper text.

The engineering team has tried using a plain <input type="range"> before and found it inconsistent across browsers and hard to style. They want a purpose-built RatingField component that renders five clickable star icons (filled vs empty to reflect the current value) and integrates seamlessly with the rest of the form — same validation feedback, same disabled/required states, same label and helper text layout as the other form fields.

Output Specification

Produce all files needed to add this form field to the codebase so it is usable from a form. The component should accept at minimum: label, required, helper, and disabled props. Include a Storybook stories file demonstrating the component in its different states.

The visual appearance should use Chakra UI style props and design tokens only. You do not need to install any icon packages — use Unicode star characters (★ ☆) or simple text to represent the stars.