reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview165Core59Shells75Blocks31
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

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

© 2026 reopt Inc. All rights reserved.

Explore/Shells/FilterBar

FilterBar

Shell

필터링 바 컴포넌트. 검색, 선택, 다중 선택 필터 지원.

filter
Related docs
npx @reopt-ai/opt-cli surface add filter-bar
100%

기본 사용

검색 필터만

컴포넌트 의존 관계

깊이
▲ USED BY (12)▼ USES (6)user-exploreracquisition-analysisfunnel-analysisbreakdown-analysispath-analysiscohort-comparisonevent-catalogcustom-dashboarddebug-workspacevisual-diff-manageruser-detailtask-dashboardFilterBarselectinputbuttonswitchcheckboxdate-range-picker

테스트 커버리지

2026년 7월 9일6/6 통과
6성공
0실패
6전체
  • 검색 필터를 렌더링한다
  • select 필터를 렌더링한다
  • multi-select 필터를 렌더링한다
  • 검색 필터 변경 시 onFilterChange를 호출한다
  • 필터가 활성화되면 초기화 버튼을 표시한다
  • 초기화 버튼 클릭 시 onClearAll을 호출한다

Related components

SearchCombobox

match-sorter 기반 퍼지 검색 콤보박스.

Filter

SegmentBuilder

세그먼트 빌더. 각 조건 컨트롤의 접근 가능한 이름을 유지하며 event, property, cohort, custom 세그먼트를 정의합니다.

Filter

AsyncCombobox

비동기 검색 콤보박스. 디바운스 + 로딩 스피너와 stale response 방어를 내장합니다.

Filter

ColumnToggler

테이블 컬럼 표시/숨김 토글러. Popover + Checkbox 리스트입니다.

Filter

BulkActions

일괄 작업 바. 선택 카운트 배지 + DropdownMenu 액션 목록 + 해제 버튼.

Filter

SavedFilters

필터 프리셋 관리. 키보드 목록 탐색, 현재 필터 저장, 안전한 삭제 확인 흐름을 제공하는 Popover UI.

Filter
PreviousActivityFeedNextQuickActions

기본 사용

패키지 검색

Segment group 1
Matchof the following
Condition 1.1
Condition 1.2

한 글자를 입력해 로딩이 시작된 뒤 두 번째 글자를 입력해 보세요. 먼저 시작한 느린 응답이 나중에 도착해도 최신 검색 결과를 덮어쓰지 않습니다.

Visible: name, email, role

3 selected