본문으로 건너뛰기

Switch

Code

components/Switch/index.tsx
import type { FC } from 'react'
import classnames from 'classnames'

export interface Props {
checked: boolean
onChange: (checked: boolean) => void
size?: 'sm' | 'md' | 'lg'
}

const Switch: FC<Props> = ({ checked, onChange, size = 'md' }) => {
return (
<label
className={classnames('relative inline-block', {
'w-7 h-4': size === 'sm',
'w-10 h-6': size === 'md',
'w-14 h-8': size === 'lg'
})}
>
<input type="checkbox" checked={checked} className="opacity-0 w-0 h-0" />
<span
onClick={() => onChange(!checked)}
className={classnames(
'absolute cursor-pointer inset-0 transition before:transition before:duration-300 duration-300 before:absolute before:content-[""] before:bg-white before:rounded-full',
checked ? 'bg-blue-600' : 'bg-gray-200',
{
'before:left-1 before:bottom-1 before:h-2 before:w-2 rounded-lg':
size === 'sm',
'before:translate-x-3': size === 'sm' && checked,
'before:left-1 before:bottom-1 before:h-4 before:w-4 rounded-xl':
size === 'md',
'before:translate-x-4': size === 'md' && checked,
'before:left-1.5 before:bottom-1 before:h-6 before:w-6 rounded-2xl':
size === 'lg',
'before:translate-x-5': size === 'lg' && checked
}
)}
/>
</label>
)
}

export default Switch

Props

NameTypeDefault
checked*booleanfalse
onChange*function
sizesm md lgmd

Example