Carregando…

Rating

Inputs

Star rating with half-star, custom icons, 3 sizes, read-only, toggle-off picker and show-value modes.

Rating Input

Unificado

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for inputs/rating-input

Instalação via CLI

$ npx kikitocn add rating

Interno:

@/lib/utils

Exemplo de uso

RatingExample.tsx

import { Rating } from "@/components/ui/cn/rating/Rating";

export function RatingExample() {
  return (
    <Rating />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`value`	`number`	`undefined`	Valor atual (controlled)
`defaultValue`	`number`	`0`	Valor inicial (uncontrolled)
`onChange`	`(value: number) => void`	`undefined`	Callback quando a nota muda
`max`	`number`	`5`	Número de estrelas/ícones
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho dos ícones
`readOnly`	`boolean`	`false`	Desativa interação, apenas exibe o valor
`disabled`	`boolean`	`false`	Desabilita e opacifica o componente
`allowHalf`	`boolean`	`false`	Permite seleção de meia estrela
`showValue`	`boolean`	`false`	Exibe o valor numérico ao lado das estrelas
`label`	`string`	`undefined`	Label acima do rating

Carregando…