Rating

Avaliação por estrelas clicáveis com modo somente leitura e máximo configurável.

Demonstração

Rating: 3 / 5

Props

PropTipoPadrãoDescrição
valuenumberValor controlado
defaultValuenumber0Valor padrão (não controlado)
maxnumber5Número máximo de estrelas
size'sm' | 'md' | 'lg''md'Tamanho: sm | md | lg
readOnlybooleanfalseDesabilita interação
disabledbooleanfalseAtenua e desabilita o rating
onChange(value: number) => voidCallback com novo valor de avaliação

Uso

import { Rating } from '@ghiberti85/ui'

const [value, setValue] = useState(3)

// Interactive
<Rating value={value} onChange={setValue} />

// Read-only
<Rating value={4} readOnly />

// Sizes
<Rating value={3} size="sm" readOnly />
<Rating value={3} size="md" readOnly />
<Rating value={3} size="lg" readOnly />

// Custom max
<Rating value={7} max={10} readOnly />

Ver no Storybook

Abrir no Storybook
Ghiberti UI — Design System