Toggle
서식이나 뷰 옵션을 전환하는 2상태 버튼이에요. aria-pressed를 노출하며 폼 필드가 아니고 자체 값을 제출하지 않아요.
핵심 속성
| 속성 | 값 | 기본값 |
|---|---|---|
| 상태 | 제어형 pressed 또는 비제어형 defaultPressed | 꺼짐 |
| 사용 가능 여부 | 활성 또는 disabled | 활성 |
| 레이블 | 보이는 텍스트 | 필수 |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/toggle.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRToggle } from '@tinyrack/ui/components/toggle';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
API
| 속성 | 타입 | 기본값 | 용도 |
|---|---|---|---|
pressed | boolean | — | 눌림 상태를 제어해요. |
defaultPressed | boolean | false | 비제어 상태의 초깃값을 설정해요. |
onPressedChange | (pressed, details) => void | — | 요청된 상태 변경을 알려요. details.cancel()로 변경을 취소할 수 있어요. |
disabled | boolean | false | 상호작용과 순차 포커스에서 버튼을 제외해요. |
value | string | 자동 생성 | TRToggleGroup 안의 항목을 식별해요. 그룹에서는 안정적인 값을 제공하세요. |
className | string | (state) => string | — | 사용자 클래스를 추가하며 TRToggleState를 사용할 수 있어요. |
render | ReactElement | (props, state) => ReactElement | <button> | 병합된 동작을 유지하면서 렌더링 요소를 바꿔요. |
TRToggleProps와 TRToggleState는 @tinyrack/ui/components/toggle에서 내보내요. TRToggle은 버튼 ref, 스타일, 네이티브 속성과 이벤트 처리기도 보존해요. 네이티브 Space·Enter 활성화, 포커스, disabled 의미는 버튼 동작을 따르며 기본 버튼 타입은 둘러싼 폼을 제출하지 않아요. 모든 토글에 접근 가능한 이름을 제공하세요. 다형성 render는 버튼 키보드 의미를 보존해야 해요. 폼 제출이나 필수 검증에 값이 포함돼야 하면 TRCheckbox 또는 TRSwitch를 사용하세요.