Rating Group

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/rating-group.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/rating-group.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/rating-group.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/rating-group.json
    

Usage

      Copy
      <script setup lang="ts">
import { RatingGroup } from "@/components/ui/rating-group";
</script>

<template>
  <RatingGroup.Root>
    <!-- … -->
  </RatingGroup.Root>
</template>
    

Composition

      Copy
      RatingGroup.Root
├── RatingGroup.Label
└── RatingGroup.Control
    ├── RatingGroup.Context
    ├── RatingGroup.Item
    │   ├── RatingGroup.ItemContext
    │   └── RatingGroup.ItemIndicator
    └── RatingGroup.HiddenInput
    

Examples

Controlled

When using the RatingGroup component, you can use the value and onValueChange props to control the state.

Root Provider

An alternative way to control the rating group is to use the RootProvider component and the useRatingGroup hook. This way you can access the state and methods from outside the component.

Field

The Field component helps manage form-related state and accessibility attributes of a rating group. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility.

Half Rating

Allow 0.5 value steps by setting the allowHalf prop to true. Ensure to render the correct icon if the half value is set in the Rating components render callback.

Forms

To use the rating group within forms, pass the prop name. It will render a hidden input and ensure the value changes get propagated to the form correctly.

Disabled

To make the rating group disabled, set the disabled prop to true.

API

See Ark UI Rating Group docs for full props and examples.