reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
StarRating
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

StarRating

Component

Select a star rating from one to N or display a read-only rating.

input
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { StarRating } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%
3점
읽기 전용:
Small:
Large:

StarRating

PropTypeDefaultDescription
valuenumber—현재 선택된 별점
onChange(value: number) => void—별점 변경 콜백
maxnumber5최대 별 개수
readOnlybooleanfalse읽기 전용 모드
size"sm" | "md" | "lg""md"별 아이콘 크기

컴포넌트 의존 관계

깊이
▲ USED BY (1)item-detailStarRating
View test results

테스트 커버리지

2026년 7월 9일8/8 통과
8성공
0실패
8전체
  • 기본 5개 별을 렌더한다
  • 클릭으로 별점을 선택한다
  • ArrowRight로 별점을 증가시킨다
  • ArrowLeft로 별점을 감소시킨다
  • Home/End 키로 최솟값/최댓값으로 이동한다
  • readOnly 모드에서 img role을 사용한다
  • max prop으로 별 개수를 변경한다
  • readOnly에서는 키보드/클릭이 동작하지 않는다

키보드 동작

키동작
ArrowRight / ArrowUp별점 1 증가
ArrowLeft / ArrowDown별점 1 감소
Home별점 1로 설정
End별점 최대로 설정

Blocks that use this component

opt-ui

ItemDetail

Blocks

Present an item or product with tags, author information, content, and reviews.

Related components

opt-ui

Select

Core

Build a dropdown selection with Root, Label, Trigger, Popover, and Item components.

opt-ui

Combobox

Core

Build autocomplete search with an input, popover, items, groups, group labels, and an empty state.

opt-ui

Button

Core

Use accessible buttons with primary, secondary, ghost, and danger variants, three sizes, icons, loading, and aria-busy states.

opt-ui

Input

Core

Use a standalone text input with labels, errors, hints, and icons.

opt-ui

Switch

Core

Toggle a setting with three sizes and explicit accessible associations for labels and descriptions.

opt-ui

Textarea

Core

Enter multiline text with the same label, error, and hint API as Input.

PreviousLoadingOverlayNextErrorBoundary