스위치 (Switch)

Usage

1import { Switch } from "podo-ui/react";2import "podo-ui/styles.css";3
4<Switch label="알림 받기" defaultChecked />

크기 (size)

스위치 크기는 사용 위치와 정보 밀도에 따라 sm(base), md, lg로 구분해 사용해요. sm은 목록이나 설정 행처럼 촘촘한 영역에, md는 일반적인 설정 화면에, lg는 모바일이나 터치 영역 확보·시각적 강조가 필요한 곳에 사용하며, 함께 놓이는 텍스트·요소와 균형을 맞춰 정렬을 유지해요.

상태 (state)

스위치 상태는 설정 값과 사용 가능 여부에 따라 off, on, disabled로 구분해 표현해요. off는 설정이 꺼진 기본 상태, on은 설정이 켜져 적용된 상태를 나타내고, disabled는 지금 변경할 수 없는 비활성 상태로 off·on 어느 쪽에서도 함께 나타나요. 켜짐과 꺼짐의 색과 핸들 위치를 뚜렷하게 구분해, 사용자가 현재 설정 상태를 즉시 인지하게 해요.

강조 (bold)

스위치는 함께 표시되는 레이블 텍스트의 강조 정도를 bold로 조절해요. 기본은 일반 굵기로 본문과 자연스럽게 어울리게 하고, bold는 항목의 중요도가 높거나 그룹의 제목·대표 선택지처럼 강조가 필요할 때 사용해요.

속성 (props)

podo-ui/react의 Switch가 받는 속성이에요. 시안의 state(on·off)는 코드에서 웹 표준(role=switch, aria-checked)에 맞춘 checked로 표현돼요. checked를 생략하면 스스로 상태를 관리하는 비제어형으로 동작해요. 이 밖에 표준 button 속성(className, aria-* 등)도 그대로 전달돼요.