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

SavedFilters

Shell

Save and browse filter presets with keyboard navigation and deletion confirmation in a popover.

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

Live preview

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

100%

SavedFilters

PropTypeDefaultDescription
currentFiltersRequiredRecord<string, unknown>—현재 적용 중인 필터
presetsRequiredFilterPreset[]—저장된 프리셋 목록
onSavePresetRequired(name: string, filters: Record<string, unknown>) => void—프리셋 저장 콜백
onLoadPresetRequired(preset: FilterPreset) => void—프리셋 불러오기 콜백
onDeletePresetRequired(presetId: string) => void—프리셋 삭제 콜백
labelsSavedFiltersLabels—트리거, 빈 상태, 저장 및 삭제 확인 문구 오버라이드
classNamestring—커스텀 CSS 클래스

SavedFiltersLabels

PropTypeDefaultDescription
triggerLabel(count: number) => string—저장된 프리셋 수를 포함한 트리거 레이블
emptyMessagestring"No saved filters"프리셋이 없을 때 표시할 메시지
deleteLabel(name: string) => string—프리셋 삭제 버튼의 접근 가능한 이름
namePlaceholderstring"Filter name…"새 프리셋 이름 입력 안내
saveLabelstring"Save"새 프리셋 저장 버튼 레이블
confirmDeleteLabelstring"Confirm"삭제 확인 버튼 레이블
cancelDeleteLabelstring"Cancel"삭제 취소 버튼 레이블

컴포넌트 의존 관계

깊이
▼ USES (3)SavedFilterspopoverinputbutton
View test results

테스트 커버리지

2026년 7월 9일1/1 통과
1성공
0실패
1전체
  • 프리셋 카운트를 트리거에 표시한다

키보드 동작

키동작
↑ ↓저장된 프리셋 간 이동
Home / End첫 번째/마지막 프리셋으로 이동
Enter프리셋 불러오기 또는 새 프리셋 저장
Escape삭제 확인 취소 후 삭제 버튼으로 포커스 복귀

Related components

opt-ui

SearchCombobox

Shells

Search options with match-sorter fuzzy matching in a combobox.

opt-ui

FilterBar

Shells

Filter a view with search, single-selection, and multiple-selection controls.

opt-ui

SegmentBuilder

Shells

Define event, property, cohort, or custom segments with accessible condition controls.

opt-ui

AsyncCombobox

Shells

Search asynchronously with built-in debouncing, loading feedback, and stale-response protection.

opt-ui

ColumnToggler

Shells

Choose visible table columns from a popover of checkboxes.

opt-ui

BulkActions

Shells

Act on selected items with a count badge, action dropdown, and clear-selection button.

PreviousBulkActionsNextNotificationCenter