Switch
켜짐/꺼짐 상태를 전환하는 토글 스위치 컴포넌트입니다.
설치
Terminal
npx @msub-core/ui-cli add switch
사용법
TSX
import { Switch } from "@msub-core/ui/components/switch"
function MyComponent() {
const [enabled, setEnabled] = useState(false)
return (
<Switch
label="알림 받기"
checked={enabled}
onChange={setEnabled}
fullWidth
/>
)
}기본
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| label | string | - | No | 스위치 라벨 |
| description | string | - | No | 라벨 아래 설명 텍스트 |
| checked | boolean | - | No | 켜짐 상태 (controlled) |
| defaultChecked | boolean | false | No | 기본 켜짐 상태 (uncontrolled) |
| onChange | (checked: boolean) => void | - | No | 상태 변경 핸들러 |
| disabled | boolean | false | No | 비활성화 상태 |
Sizes
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| size | "sm" | "default" | "lg" | "default" | No | 스위치 크기 |
전체 너비 (fullWidth)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| fullWidth | boolean | false | No | 전체 너비 (라벨과 스위치를 양 끝에 배치) |
| labelPosition | "left" | "right" | "left" | No | 라벨 위치 |
설명 텍스트
프로모션, 이벤트 등 마케팅 정보를 받아봅니다.
어두운 테마를 사용합니다.
상태
SwitchGroup
알림 설정받고 싶은 알림을 선택하세요
중요한 업데이트를 이메일로 받습니다.
실시간 알림을 받습니다.
문자 메시지로 알림을 받습니다.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | - | Yes | 자식 스위치들 |
| label | string | - | No | 그룹 라벨 |
| description | string | - | No | 그룹 설명 |
실제 사용 예시
설정
변경사항을 자동으로 저장합니다.
알림이 올 때 소리를 재생합니다.
앱에서 위치 정보를 사용합니다.
실험적인 새 기능을 먼저 사용해봅니다.