Toggle

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

상태를 유지하는 버튼으로 명령을 켜고 끄세요. 두 상태 모두 라벨은 동일하게 유지하세요. aria-pressed가 상태를 전달하고, 완전히 둥근 표면이 상태를 보여줍니다.

네비게이션 또는 일회성 액션에는 Link나 Button을 사용하세요. 폼에서 체크된 값이 필요하면 Checkbox나 Switch를 사용하세요. FormData나 폼 리셋에 Toggle 상태가 포함된다고 가정하지 마세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Toggle(button) → optional decorative SVG + stable action label

키보드와 접근성

Tab으로 토글에 이동한 뒤 Enter나 Space로 상태를 변경하세요. 비활성 토글은 변경되지 않습니다. pressed와 onPressedChange로 제어하거나 defaultPressed를 설정하세요. event.cancel()이 변경을 취소합니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Toggle } from '@surflane/ui'

<Toggle pressed={pinned} onPressedChange={setPinned}>
  Pin logs
</Toggle>
<Toggle defaultPressed>Show timings</Toggle>
<Toggle size='icon' aria-label='Pin logs'>
  <PinIcon />
</Toggle>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰