# v-model
The Vue3StarRatings component uses the v-model directive to synchronize the rating between the component and its parent. This means that when you click on the stars to rate something, the rating will be reflected in the parent component.
Composition API
Options
# Props
You can customize the component by taking a look at the props table below.
Version 1.x.x/2.x.x
Version 3.x.x
| Name | Description | Type | Default |
|---|---|---|---|
| starSize | This is the height and width of the stars in pixels | Number | 32 |
| starColor | This is the color of the stars when active | String | #ff9800 |
| inactiveColor | This is the color of the stars when inactive | String | #333 |
| numberOfStars | Specifies the total number of stars displayed and the maximum rating | Number | 5 |
| disableClick | This is the option to disable click on the stars, use in conjunction with the showControl Prop | Boolean | false |
| v-model | Syncs the rating value between the component and its parent component | N/A | N/A |
| customSvg | Provides an option for using a custom SVG icon for the star rating | Component | N/A |