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

StatusSelect

Shell

Choose a status from a dropdown with color indicators.

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

Live preview

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

100%

기본 사용

색상 커스터마이징

StatusSelect

PropTypeDefaultDescription
optionsRequiredSelectOption[]—옵션 목록. { value, label, color? }
valuestring—제어 모드: 현재 선택 값
onChange(value: string) => void—제어 모드: 값 변경 핸들러
labelstring"상태"Select 레이블

컴포넌트 의존 관계

깊이
▲ USED BY (3)▼ USES (1)data-explorerdeployment-centerworkflow-run-historyStatusSelectselect
View test results

테스트 커버리지

2026년 7월 9일2/2 통과
2성공
0실패
2전체
  • combobox role을 렌더링한다
  • 레이블을 렌더링한다

Blocks that use this component

opt-ui

DataExplorer

Blocks

Explore filtered data with SearchCombobox, StatusSelect, and DataTable inside a group-spaced BlockLayout.

opt-ui

DeploymentCenter

Blocks

Manage deployments with branch and status selectors, quick actions, timelines, domains, and environment variables.

opt-ui

WorkflowRunHistory

Blocks

Browse workflow runs with search and status filters, a DataTable, and tabbed detail dialogs.

Related components

opt-ui

NotificationToast

Shells

Manage global notifications with priority-aware live regions and auto-dismiss paused during pointer or keyboard interaction.

opt-ui

ConnectionIndicator

Shells

Indicate connected, connecting, disconnected, and error states.

opt-ui

FloatingActionBar

Shells

Show bulk actions for selected items in a floating bottom bar.

opt-ui

FailureList

Shells

Review grouped failures with severity colors and action slots.

opt-ui

AlertBuilder

Shells

Configure metric conditions, frequency, and notification channels with explicitly associated form labels.

opt-ui

ConfirmDialog

Shells

Confirm or cancel actions with a danger variant for destructive operations.

PreviousSearchComboboxNextEditorToolbar