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

A design system for the AI era

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

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

© 2026 reopt Inc. All rights reserved.

Explore/Core/Toggle

Toggle

Component

눌림(pressed) 두 상태 버튼. 단독 사용하거나 ToggleGroup으로 묶어 단일/다중 선택을 만든다.

Related docs
bun add @reopt-ai/opt-ui
100%

단독 Toggle

상태: 꺼짐

단일 선택 그룹 (정렬)

선택: left

다중 선택 그룹 (서식)

선택: bold

Toggle

PropTypeDefaultDescription
pressedboolean—제어 모드: 눌림 상태 (단독 사용)
defaultPressedboolean—비제어 초기 눌림 상태 (단독 사용)
onPressedChange(pressed: boolean) => void—눌림 상태 변경 콜백 (단독 사용)
valuestring—ToggleGroup 내에서 이 토글을 식별하는 값
size"sm" | "md"—크기 (기본 md)
disabledboolean—비활성화
childrenReactNode—토글 콘텐츠

ToggleGroup

PropTypeDefaultDescription
valuestring | string[]—선택 값. 단일은 string, toggleMultiple은 string[]
defaultValuestring | string[]—비제어 초기 선택 값
onValueChange(value: string | string[]) => void—선택 변경 콜백
toggleMultipleboolean—동시에 여러 개 눌림 허용
orientation"horizontal" | "vertical"—배치 방향 (기본 horizontal)
disabledboolean—그룹 전체 비활성화
childrenReactNode—Toggle 항목들
View test results

테스트 커버리지

2026년 7월 9일3/3 통과
3성공
0실패
3전체
  • 단독 토글이 클릭으로 pressed 상태를 전환한다
  • 제어 모드 pressed prop을 반영한다
  • disabled면 클릭이 무시된다

Related components

FieldToken

필드 타입을 일관된 글리프와 선택적 텍스트 레이블로 표현합니다. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 같은 아이콘과 팔레트 슬롯을 씁니다.

Facet

필드 값 분포를 카운트와 점유율 막대로 보여주고 그 행 자체가 필터가 되는 패싯. 긴 꼬리는 접어 두고 상위 값부터 읽힌다.

Expression

조건을 폼이 아니라 문장으로 쓰고 그 자리에서 편집하는 표현식 절. 알림 규칙·세그먼트 필터처럼 읽어서 검증해야 하는 조건에 쓴다.

TextTruncate

실제 폰트로 실제 가용 폭을 측정해 문자열의 식별력이 가장 낮은 부분을 잘라내는 생략. CSS가 못 하는 앞·중간·양끝 생략을 지원하고 전체 문자열은 접근성 트리에 남는다.

Highlight

검색어에 해당하는 구간을 <mark>로 표시. 긴 항목 우선 매칭이라 겹치는 검색어도 조각나지 않는다.

LiveRegion

라이브 뷰의 변화를 스크린 리더에 읽어 주는 영역. 스로틀로 폭주를 요약하고 두 노드를 번갈아 써서 같은 문구도 다시 읽힌다.

PreviousOtpFieldNextAccordion

스키마 컬럼 목록

  • event_nameVARCHAR
  • user_iduuid
  • occurred_atTIMESTAMP WITH TIME ZONE
  • revenueDECIMAL(12,2)
  • is_internalboolean
  • propertiesJSONB
  • referrerurl
  • client_ipinet
  • tagstext[]

전체 타입

StringNumberBooleanDateDate and timeDurationPercentCurrencyEnumArrayObjectJSONIP addressGeo pointURLEmailIdentifierBinaryAggregateNestedUnknown

크기와 채우기

결제 금액

값 분포로 필터하기

선택: safari

표본이 전체보다 작을 때

Chrome4.8만61%
Safari1.9만24%
Edge6.1천7.8%

로딩과 빈 상태

Counting…
No values in this range.

알림 규칙

열린 절: 없음

상태

grouped overall eventsnotifySlack #alerts

컬럼 배치

생략 위치

endhttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country
starthttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country
middlehttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country
startEndhttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

테이블 셀

트레이스경로
trace-9f2c1ad0-77be-4b21-a0d9-4c2f1e88b310-segment-014https://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

검색어 강조

  • checkout_completed · plan=pro · country=KR
  • checkout_started · plan=free · country=US
  • signup_completed · source=organic · country=KR
  • page_view · path=/pricing · country=JP

검색어 여러 개

checkout_completed 이벤트가 KR 지역에서 12% 증가했고 US 지역에서는 3% 감소했습니다.

스트리밍 카운터

수신한 이벤트0

스크린 리더에는 4초마다 한 번만 요약해 읽어 줍니다. 일시정지하면 안내도 멈춥니다.