Rating Group

#Basic usage

rating-group/basic Vue React

Rate this entry

rating-group/basic.vue

<script setup lang="ts">
import { RatingGroup } from "@bysages/vue";
</script>

<template>
  <RatingGroup.Root :count="5" :default-value="3">
    <RatingGroup.Label>Rate this entry</RatingGroup.Label>
    <RatingGroup.Control>
      <RatingGroup.Context v-slot="{ items }">
        <RatingGroup.Item v-for="item in items" :key="item" :index="item">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path
              d="M12 2.5l2.9 6.1 6.7.9-4.9 4.6 1.2 6.6-5.9-3.2-5.9 3.2 1.2-6.6L2.4 9.5l6.7-.9z"
            />
          </svg>
        </RatingGroup.Item>
      </RatingGroup.Context>
      <RatingGroup.HiddenInput />
    </RatingGroup.Control>
  </RatingGroup.Root>
</template>

#Props

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#HiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemContext

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Default	Description
`index`	`number`		—

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder every seal stands on.
`allowHalf`	`boolean`		Whether to allow half stars.
`autoFocus`	`boolean`		Whether to autofocus the rating.
`count`	`number`	`5`	The total number of ratings.
`defaultValue`	`number`		The initial value of the rating when rendered. Use when you don't need to control the value of the rating.
`disabled`	`boolean`		Whether the rating is disabled.
`form`	`string`		The associate form of the underlying input element.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; label: string; hiddenInput: string; control: string; item(id: string): string; }>`		The ids of the elements in the rating. Useful for composition.
`modelValue`	`number`		The v-model value of the rating group
`name`	`string`		The name attribute of the rating element (used in forms).
`readOnly`	`boolean`		Whether the rating is readonly.
`required`	`boolean`		Whether the rating is required.
`translations`	`ratingGroup.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states