Switch

스위치 컴포넌트는 on/off 상태를 토글하는 폼 요소입니다.

기본 사용법

스위치 예제

켜진 상태 (비활성화)

import Switch from '@aift/ui/Switch';

export default function Preview() {
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <Switch id="switch-1" />
        <label htmlFor="switch-1" className="text-sm">스위치 예제</label>
      </div>
      <div className="flex items-center gap-2">
        <Switch id="switch-2" checked disabled />
        <label htmlFor="switch-2" className="text-sm">켜진 상태 (비활성화)</label>
      </div>
    </div>
  );
}

import Switch from '@aift/ui/Switch';export default function Preview() {  return (    <div className="space-y-4">      <div className="flex items-center gap-2">        <Switch id="switch-1" />        <label htmlFor="switch-1" className="text-sm">스위치 예제</label>      </div>      <div className="flex items-center gap-2">        <Switch id="switch-2" checked disabled />        <label htmlFor="switch-2" className="text-sm">켜진 상태 (비활성화)</label>      </div>    </div>  );}

Props

Prop	Type	Default	Description
checked	`boolean`	`false`	스위치 상태
onCheckedChange	`(checked: boolean) => void`	-	상태 변경 핸들러
disabled	`boolean`	`false`	비활성화 여부
id	`string`	-	스위치 ID

Switch

Switch

기본 사용법

Props

On this page