reopt designreopt design
DocsExploreToolsPricingBuilder
로그인
Explore/
opt-ui205opt-charts40opt-datagrid9opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview205Core74Shells99Blocks32
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 소개
  • 문의
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/Switch

Switch

컴포넌트

토글 스위치 컴포넌트. 3가지 크기와 레이블/설명의 명시적 접근성 연결을 지원합니다.

input
관련 문서
bun add @reopt-ai/opt-ui
100%

Basic

알림 받기

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

다크 모드

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

마케팅 수신

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

Sizes

Small
Medium
Large

Disabled

Off (disabled)
On (disabled)

Without Label

Switch

Prop타입기본값설명
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
테스트 결과 자세히 보기

테스트 커버리지

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를 설정한다

이 컴포넌트를 쓰는 블록

InsightsDashboard

인사이트 대시보드 Surface. InsightsPanel 래핑 + 탐지 실행, 시간 범위 필터, 에러 표시, dismissed 토글, 탐지 메서드/파라미터 제어.

분석

PathAnalysis

경로 분석 Surface. 설정 사이드바(단계 소스·시작/종료점·단계 수·행 수·제외·반복 병합·URL 그룹핑·최소 세션·세그먼트) + PathFlowChart(grid/sankey) 흐름 탭 + Top Paths/Drop-off/Patterns/Entry-Exit/Dwell 탭 조합.

분석

관련 컴포넌트

Select

드롭다운 선택 컴포넌트. 5-part anatomy: Root, Label, Trigger, Popover, Item.

입력

Combobox

자동완성 검색 입력. 7 exports: Root, Input, Popover, Item, Group, GroupLabel, Empty.

입력

Button

접근성 버튼 컴포넌트. 4가지 변형(primary, secondary, ghost, danger), 3가지 크기, 로딩/아이콘과 aria-busy 상태를 지원합니다.

입력

Input

독립적인 텍스트 입력 컴포넌트. 레이블, 에러, 힌트, 아이콘 지원.

입력

Textarea

멀티라인 텍스트 입력. Input과 동일한 API (label, error, hint).

입력

Checkbox

독립적인 체크박스 컴포넌트. 레이블, 설명, 그룹과 DOM property까지 동기화되는 indeterminate 상태를 지원합니다.

입력
이전Input다음Skeleton