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

CriteriaBuilder

Shell

Edit two-level condition trees with AND/OR groups, ordering, duplication, negation, and errors; callers render conditions as Expression chips.

Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { CriteriaBuilder, criteriaBuilderMove, criteriaBuilderDuplicate, criteriaBuilderRemove, criteriaBuilderInsert, criteriaBuilderRemoveGroup, criteriaBuilderDuplicateGroup, criteriaGroupLetter } from "@reopt-ai/opt-ui";

Live preview

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

100%

세그먼트 정의

그룹 결합 방식
AG조건 추가 · 그룹 추가
그룹 A
A
그룹 A 조건 결합 방식
조건 A.1
그리고
조건 A.2
그리고
그룹 B
B
그룹 B 조건 결합 방식
조건 B.1
또는
조건 B.2
예상 사용자2,204전체 48,200명 중데모용 추정치입니다. 실제 제품에서는 쿼리 결과를 보여줍니다.
비율4.6%

Usage guidance

Anatomy

  • Root AND/OR segmented control → group panels with lettermarks, group operators, and duplicate/remove actions → criterion rows with negation, expressions, and move/duplicate/remove actions → add-criterion menu → add-group button

Best practices

  • The consumer owns criterion data types and their wording. Compose Expression chips in renderCriterion and open a Popover to edit values.
  • createCriterion receives only kind and negate to create an initial criterion. Generate a unique id there.
  • Key errors by criterion ID or group ID. The consumer validates; the shell handles display and ARIA relationships.
  • Place a live count such as StatCard in aside. It appears beside the tree on wide screens and below it on narrow screens.

Usage to avoid

  • Do not render an unknown kind using another kind's fields. The shell shows a warning row and allows only replacement or removal.
  • Use a simpler component such as SegmentBuilder when fixed select controls are enough. Choose this shell for sentence-style editing and group logic.

Usage examples

Event-criteria segment

CriteriaBuilder

PropTypeDefaultDescription
valueRequiredCriteriaBuilderValue<TCriterion>—조건 트리. { logic, groups: [{ id, logic, criteria }] }
onChangeRequired(next: CriteriaBuilderValue<TCriterion>) => void—트리 변경 핸들러
kindsRequiredCriteriaBuilderKindOption[]—조건 추가 메뉴 항목. group으로 섹션을 나누고 negatedLabel이 있으면 부정 항목을 따로 냅니다
createCriterionRequired(kind: string, negate: boolean) => TCriterion—메뉴 선택으로 만들 초기 조건. 고유 id를 돌려줘야 합니다
renderCriterionRequired(criterion: TCriterion, api: CriteriaRenderApi<TCriterion>) => React.ReactNode—조건 한 줄의 편집 가능한 문장 렌더러
cloneCriterion(criterion: TCriterion) => TCriterion—복제 시 만들 사본. 기본은 새 id를 붙인 얕은 복사
createGroupId() => string—셸이 만드는 그룹의 id. 기본 group-N
errorsRecord<string, string>—조건 id 또는 그룹 id별 오류 메시지
maxGroupsnumber10그룹 최대 수
maxCriteriaPerGroupnumber20그룹당 조건 최대 수
allowNegationbooleantrue조건별 부정 토글 표시
disabledbooleanfalse전체 비활성화
asideReact.ReactNode—넓은 화면에서 트리 옆, 좁은 화면에서 아래에 놓이는 미리보기 슬롯
labelsCriteriaBuilderLabels—i18n용 라벨 오버라이드 (기본 한국어)
classNamestring—루트 CSS 클래스
aria-labelstring—빌더 접근성 이름

컴포넌트 의존 관계

깊이
▼ USES (6)CriteriaBuildersegmented-controldropdown-menubuttoncalloutempty-statekbd
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

키보드 동작

키동작
A포커스된 그룹에 조건 추가 메뉴 열기
G그룹 추가

Related components

opt-ui

Callout

Core

Keep a persistent notice in the page layout while its condition applies, without a dismiss action.

opt-ui

SegmentedControl

Core

Show all options in a single-selection control with radio-group semantics and arrow-key navigation.

opt-ui

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

opt-ui

PageAside

Shells

Add a sticky, fixed-width page aside with header, body, and footer slots.

opt-ui

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

opt-ui

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

PreviousSegmentBuilderNextInsightsPanel