reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Facet
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.

Facet

Component

Filter by field values while reading their counts and distribution bars. Show top values first and collapse the long tail.

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

Live preview

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

100%

값 분포로 필터하기

선택: safari

표본이 전체보다 작을 때

Chrome4.8만61%
Safari1.9만24%
Edge6.1천7.8%

로딩과 빈 상태

Counting…
No values in this range.

Facet

PropTypeDefaultDescription
itemRequiredFacetItem—표시할 값
selectedbooleanfalse선택 상태
onSelect(id: string) => void—선택 콜백
showSharebooleantrue점유율 막대 표시
sharenumber—0–1 점유율. 그룹이 계산해 내려줌
countFormatter(count: number) => string—카운트 포맷터
layout"vertical" | "horizontal""vertical"배치 방향
labelsFacetGroupLabels—지역화 문자열
classNamestring—추가 CSS 클래스

FacetGroup

PropTypeDefaultDescription
itemsRequiredFacetItem[]—값 목록
selectedstring[]—선택된 id. 생략 시 비제어
onSelectedChange(next: string[]) => void—선택 변경 콜백
selection"single" | "multiple" | "none""multiple"선택 모드
layout"vertical" | "horizontal""vertical"배치 방향
showSharebooleantrue점유율 막대 표시
countFormatter(count: number) => string—카운트 포맷터
maxnumber—접기 전 표시 행 수
totalnumber—점유율 분모. 생략 시 카운트 합
loadingbooleanfalse로딩 상태
emptyStateReactNode—빈 상태 렌더
labelsFacetGroupLabels—지역화 문자열
classNamestring—추가 CSS 클래스
aria-labelstring—그룹 접근성 이름
View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

Facet 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

opt-ui

FieldToken

Core

Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.

opt-ui

Expression

Core

Read and edit conditions as sentences for alert rules and segment filters that need to be easy to verify.

opt-ui

TextTruncate

Core

Measure text in its actual font and available width to truncate the start, middle, or both ends while preserving the full accessible text.

opt-ui

Highlight

Core

Mark matching search terms with semantic mark elements, matching longer terms first to avoid fragmented overlaps.

opt-ui

LiveRegion

Core

Announce live updates to screen readers with throttled summaries and alternating nodes that can repeat identical messages.

opt-ui

ColorPalette

Core

Preview and select visualization palettes using categorical swatches or sequential and diverging gradients.

PreviousFieldTokenNextExpression