Form fields·loomora/RatingField
RatingField
A controlled rating control. Click a star to set the value, click it again to clear, and use arrow keys, Home, and End for keyboard control. A hidden input submits the value with native forms.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { RatingField } from 'loomora'
<RatingField label="Quality" properties={{ value, setValue, max: 5, step: 0.5 }} />API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| properties.value | number | 0 | Current rating. |
| properties.setValue | (value: number) => void | — | Called with the new rating. |
| properties.max | number | 5 | Number of icons. |
| properties.step | 1 | 0.5 | 1 | Use 0.5 for half-star values. |
| properties.allowClear | boolean | true | Clicking the current value resets it to 0. |
| properties.readOnly / disabled | boolean | false | Prevents interaction. |
| properties.icon / emptyIcon | ReactNode | star | Custom icons for filled and empty states. |
| properties.labels | string[] | — | Text shown beside the stars for each value. |