Usage
Use the v-model directive to control the rating value of the InputRating component.
<script setup lang="ts">
const value = ref(3)
</script>
<template>
<B24InputRating v-model="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(3)
</script>
<template>
<B24InputRating v-model="value" />
</template>
Use the default-value prop to set the initial value when you do not need to control its state.
<template>
<B24InputRating :default-value="3" />
</template>
Step
Use the step prop to control the granularity of each star. Set it to 0.5 to allow half-star ratings.
<template>
<B24InputRating :step="0.5" :default-value="3.5" />
</template>
Length
Use the length prop to set the number of stars. Defaults to 5.
<template>
<B24InputRating :length="10" :step="0.5" :default-value="7.5" />
</template>
Clearable
Use the clearable prop to allow users to clear the rating by clicking on the currently selected value. Defaults to false.
<template>
<B24InputRating clearable :default-value="3" />
</template>
Hoverable
Use the hoverable prop to control whether the rating previews the value when hovering over the stars. Defaults to false.
<template>
<B24InputRating hoverable :default-value="3" />
</template>
Icon
Use the icon prop to customize the icon used for stars.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>
<template>
<B24InputRating :icon="RocketIcon" :default-value="4" />
</template>
Empty Icon
Use the empty-icon prop to customize the icon used for empty stars. If not provided, uses the same icon as icon.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>
<template>
<B24InputRating :next-icon="RocketIcon" :default-value="3" />
</template>
Color
Use the color prop to change the color of the filled stars.
<template>
<B24InputRating color="air-primary-success" :default-value="4" />
</template>
Size
Use the size prop to change the size of the stars.
<template>
<B24InputRating size="xl" :default-value="4" />
</template>
Orientation
Use the orientation prop to change the orientation of the rating. Defaults to horizontal.
<template>
<B24InputRating orientation="vertical" :default-value="4" />
</template>
Disabled
Use the disabled prop to disable the InputRating component.
<template>
<B24InputRating disabled :default-value="3" />
</template>
Readonly
Use the readonly prop to display a rating without allowing user interaction. Unlike disabled, it maintains normal appearance (full opacity, default cursor). Use when you want to display a rating that cannot be changed but should look normal.
<template>
<B24InputRating readonly :default-value="4.5" />
</template>
API
Props
Slots
Emits
Theme
export default {
slots: {
root: '',
item: 'relative inline-block cursor-pointer select-none rounded-sm has-focus-visible:outline-3 outline-(--b24ui-border-color) transition',
indicator: 'absolute inset-0 overflow-hidden outline-none text-transparent w-(--reka-rating-item-step-width) opacity-(--reka-rating-item-step-opacity) z-(--reka-rating-item-step-z-index) data-[state=active]:text-(--b24ui-background)',
icon: 'block',
emptyIcon: 'block w-full h-full text-legend pointer-events-none'
},
variants: {
orientation: {
horizontal: {
root: 'inline-flex items-center gap-0.5'
},
vertical: {
root: 'inline-flex flex-col items-center gap-0.5'
}
},
size: {
xss: {
item: 'size-2',
icon: 'size-2'
},
xs: {
item: 'size-3',
icon: 'size-3'
},
sm: {
item: 'size-4',
icon: 'size-4'
},
md: {
item: 'size-5',
icon: 'size-5'
},
lg: {
item: 'size-6',
icon: 'size-6'
},
xl: {
item: 'size-7',
icon: 'size-7'
}
},
color: {
'air-primary': {
root: 'style-filled'
},
'air-primary-success': {
root: 'style-filled-success'
},
'air-primary-alert': {
root: 'style-filled-alert'
},
'air-primary-copilot': {
root: 'style-filled-copilot'
},
'air-primary-warning': {
root: 'style-filled-warning'
}
},
readonly: {
true: {
root: 'cursor-default',
item: 'cursor-default'
},
false: {}
},
disabled: {
true: {
root: 'opacity-30 cursor-not-allowed',
item: 'cursor-not-allowed pointer-events-none'
},
false: {}
}
},
compoundVariants: [
{
readonly: false,
disabled: false,
class: {
item: 'hover:scale-110'
}
}
],
defaultVariants: {
color: 'air-primary',
size: 'md'
}
}