Rating

Calificaciones con estrellas que se pueden clickear, previsualizar al pasar el cursor y manejar con teclado. Medios pasos, solo lectura e íconos propios.

How was the 2.4 release?

1'use client';
2
3import * as React from 'react';
4import { Rating } from '@/components/ui/rating';
5
6export function Default() {
7  const [value, setValue] = React.useState(0);
8
9  return (
10    <div className="flex flex-col items-center gap-2">
11      <Rating value={value} onValueChange={setValue} aria-label="Rate this release" />
12      <p className="text-muted-foreground text-xs">
13        {value === 0 ? 'How was the 2.4 release?' : `You rated it ${value} out of 5`}
14      </p>
15    </div>
16  );
17}

Instalación

pnpm dlx nachui add rating

Anatomía

1import { Rating } from '@/components/ui/rating';

1<Rating defaultValue={3} onValueChange={setScore} aria-label="Califica esta versión" />

La calificación interactiva es un radiogroup con un radio por paso, así que la tecnología asistiva lo lee como una elección entre valores. El foco cae en el valor actual, las flechas mueven un paso, Home y End saltan a los extremos y Backspace limpia. Pasar el cursor previsualiza un valor sin confirmarlo.

Variantes

Predeterminado (Default)

Controlado con value y onValueChange, o no controlado con defaultValue.

How was the 2.4 release?

1'use client';
2
3import * as React from 'react';
4import { Rating } from '@/components/ui/rating';
5
6export function Default() {
7  const [value, setValue] = React.useState(0);
8
9  return (
10    <div className="flex flex-col items-center gap-2">
11      <Rating value={value} onValueChange={setValue} aria-label="Rate this release" />
12      <p className="text-muted-foreground text-xs">
13        {value === 0 ? 'How was the 2.4 release?' : `You rated it ${value} out of 5`}
14      </p>
15    </div>
16  );
17}

Medios pasos

precision={0.5} divide cada estrella. La mitad se elige según dónde está el puntero. allowClear vuelve a cero cuando se clickea el valor actual otra vez.

1import { Rating } from '@/components/ui/rating';
2
3export function Half() {
4  return (
5    <Rating
6      defaultValue={3.5}
7      precision={0.5}
8      allowClear
9      aria-label="Rate the onboarding experience"
10    />
11  );
12}

Solo lectura

readOnly renderiza un img con una etiqueta como 4.6 of 5 y sin botones. Los hijos se muestran después de las estrellas, para conteos y promedios.

Northwind Desk Mat

4.6 (1284)

Mechanical Keyboard, 65%

4.2 (312)

Monitor Arm

3.8 (97)

1import { Rating } from '@/components/ui/rating';
2
3const reviews = [
4  { product: 'Northwind Desk Mat', score: 4.6, count: 1284 },
5  { product: 'Mechanical Keyboard, 65%', score: 4.2, count: 312 },
6  { product: 'Monitor Arm', score: 3.8, count: 97 },
7];
8
9export function ReadOnly() {
10  return (
11    <div className="flex w-full max-w-sm flex-col gap-3">
12      {reviews.map((review) => (
13        <div key={review.product} className="flex items-center justify-between gap-4">
14          <span className="text-sm">{review.product}</span>
15          <Rating readOnly value={review.score} precision={0.5} size="sm">
16            <span className="text-muted-foreground text-xs tabular-nums">
17              {review.score} ({review.count})
18            </span>
19          </Rating>
20        </div>
21      ))}
22    </div>
23  );
24}

Tamaños

1import { Rating } from '@/components/ui/rating';
2
3export function Sizes() {
4  return (
5    <div className="flex flex-col items-start gap-4">
6      <Rating size="sm" defaultValue={4} aria-label="Small rating" />
7      <Rating size="default" defaultValue={4} aria-label="Default rating" />
8      <Rating size="lg" defaultValue={4} aria-label="Large rating" />
9    </div>
10  );
11}

Ícono propio

icon y filledIcon cambian la forma. Recolorea el relleno a través del slot rating-fill.

1import { HeartIcon } from '@hugeicons/core-free-icons';
2import { HugeiconsIcon } from '@hugeicons/react';
3import { Rating } from '@/components/ui/rating';
4
5export function CustomIcon() {
6  return (
7    <Rating
8      max={5}
9      defaultValue={3}
10      aria-label="How much did you like it?"
11      icon={<HugeiconsIcon icon={HeartIcon} strokeWidth={1.5} />}
12      filledIcon={<HugeiconsIcon icon={HeartIcon} strokeWidth={1.5} fill="currentColor" />}
13      className="[&_[data-slot=rating-fill]]:text-destructive"
14    />
15  );
16}

Referencia de API

Rating

Prop	Tipo	Por defecto	Descripción
`value`	`number`	-	Valor controlado
`defaultValue`	`number`	`0`	Valor inicial cuando no es controlado
`onValueChange`	`(value: number) => void`	-	Se llama con el nuevo valor
`max`	`number`	`5`	Cantidad de pasos
`precision`	`1` \| `0.5`	`1`	Pasos enteros o medios
`size`	`"sm"` \| `"default"` \| `"lg"`	`"default"`	Tamaño del ícono
`readOnly`	`boolean`	`false`	Solo muestra
`disabled`	`boolean`	`false`	Atenúa y bloquea la interacción
`allowClear`	`boolean`	`false`	Elegir el valor actual lo limpia
`name`	`string`	-	Renderiza un input oculto para enviar formularios
`icon`	`ReactNode`	estrella en línea	Ícono de contorno
`filledIcon`	`ReactNode`	estrella rellena	Ícono dibujado sobre el contorno, recortado al relleno
`getLabel`	`(value: number, max: number) => string`	`"3 of 5"`	Etiqueta accesible de cada paso y del grupo
`className`	`string`	-	Clases CSS adicionales

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorRadio

SiguienteResizable