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

Switch

Component

Toggle a setting with three sizes and explicit accessible associations for labels and descriptions.

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

Live preview

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

100%

Basic

알림 받기

새로운 업데이트를 알림으로 받습니다.

다크 모드

어두운 테마를 사용합니다.

마케팅 수신

프로모션 및 이벤트 정보를 받습니다.

Sizes

Small
Medium
Large

Disabled

Off (disabled)
On (disabled)

Without Label

Usage guidance

Best practices

  • Use for on/off settings that take effect immediately. onChange receives a boolean, not a DOM event.

Usage to avoid

  • Use checkboxes for consent choices applied together on submission. Keep the switch label consistent across states.

Usage examples

Controlled notification setting

Switch

PropTypeDefaultDescription
labelstring—스위치 레이블
hintstring—레이블 아래 보조 설명 텍스트
descriptionstring—레이블 아래 설명 텍스트
checkedboolean—제어 모드: 체크 상태
defaultCheckedboolean—비제어 모드: 초기 체크 상태
onChange(checked: boolean) => void—상태 변경 핸들러
size"sm" | "md" | "lg""md"스위치 크기
disabledboolean—비활성화 상태

컴포넌트 의존 관계

깊이
▲ USED BY (6)settings-formfilter-barfeature-flag-panelsave-query-dialogpath-analysisinsights-dashboardSwitch
View test results

테스트 커버리지

2026년 7월 9일15/15 통과
15성공
0실패
15전체
  • switch role을 렌더링한다
  • label을 렌더링한다
  • visible label을 accessible name으로 연결한다
  • label이 없어도 기본 accessible name을 제공한다
  • aria-label prop이 visible label보다 우선한다
  • 클릭으로 토글할 수 있다
  • controlled 상태에서 클릭 시 값이 전환된다
  • checked 상태를 반영한다
  • disabled 상태를 지원한다
  • description을 표시한다
  • description을 aria-describedby로 연결한다
  • error 메시지를 표시한다
  • hint 텍스트를 표시한다
  • required prop이 RequiredMark를 표시한다
  • aria-required를 설정한다

Blocks that use this component

opt-ui

InsightsDashboard

Blocks

Run anomaly detection and review insights with time filters, errors, dismissed items, and configurable detection methods.

opt-ui

PathAnalysis

Blocks

Configure user-path analysis and explore grid or Sankey flows, top paths, drop-off, patterns, entry and exit points, and dwell time.

Related components

opt-ui

Select

Core

Build a dropdown selection with Root, Label, Trigger, Popover, and Item components.

opt-ui

Combobox

Core

Build autocomplete search with an input, popover, items, groups, group labels, and an empty state.

opt-ui

Button

Core

Use accessible buttons with primary, secondary, ghost, and danger variants, three sizes, icons, loading, and aria-busy states.

opt-ui

Input

Core

Use a standalone text input with labels, errors, hints, and icons.

opt-ui

Textarea

Core

Enter multiline text with the same label, error, and hint API as Input.

opt-ui

Checkbox

Core

Use labeled checkboxes with descriptions, groups, and an indeterminate state synchronized to the DOM property.

PreviousInputNextSkeleton