Rate
A star rating supporting keyboard arrow-key adjustment; clicking the currently selected star clears the value by default.
Basic Usage
Basic usage
Custom Count
max
Set the number of stars via max.
Half Stars
Half stars (allow-half)
allow-half allows expressing half stars via value; clicks still increment by whole stars.
Clear on Click
Clear on click (allow-clear)
allow-clear is enabled by default: clicking the currently selected star again clears it to 0 and dispatches oas-change (detail: { value: 0 }); setting it to "false" disables clearing on click.
Custom Icon (icon property)
Custom icon (icon property)
Pass a character or SVG markup via the icon property to replace the star icon:
Custom icon (icon property · SVG)
Custom Icon (slot)
Custom icon (slot)
Pass any element via slot="icon"; it is cloned onto every star. Priority: icon property > slot="icon" > default star.
Disabled
Disabled
Events
Change events
Listen to oas-change (on click, clear, or keyboard adjustment, detail: { value }):
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
allow-clear | Clear to 0 when clicking the currently selected star | string | true |
allow-half | Allow half stars | boolean | — |
disabled | Disabled | boolean | — |
icon | Custom star icon (character or SVG markup) | — | — |
max | Number of stars | string | 5 |
value | Current score (controlled) | string | 0 |
Events
| Event | Description |
|---|---|
oas-change | Score change, detail: { value } |
Slots
| Name | Description |
|---|---|
icon | — |
Icon customization: icon property > slot="icon" (cloned to each star) > default star.
Keyboard: ←/→ (or ↑/↓) to adjust, Home to reset to zero, End to fill.