dodam dodam logo

B1ND Docs

Switch

ON / OFF 상태를 토글하는 스위치 컴포넌트입니다.


Preview

size - medium (default)

size - small


Usage

tsx
import { Switch } from '@b1nd/dodam-design-system/components'
import { useState } from "react"
export default function Example() {
const [checked, setChecked] = useState(false);
return (
<Switch
checked={checked}
onChange={() => setChecked(prev => !prev)}
disabled={false}
size="medium"
/>
)
}

Props

PropTypeDefaultDescription
checkedboolean-스위치 ON/OFF 상태
onChange() => void-상태 변경 콜백
disabledbooleanfalse비활성화 여부
size"medium" | "small""medium"스위치 크기
customStyleCSSObject{}커스텀 CSS 스타일