Switch

켜기/끄기 상태를 전환하는 토글 스위치

Basic Usage

두 가지 상태 사이를 전환하는 스위치입니다.

tsx

<Switch />

Sizes

두 가지 크기를 제공합니다.

Small

Default

tsx

<Switch size="sm" />
<Switch size="default" />

With Label

Label 컴포넌트와 함께 사용할 수 있습니다.

비행기 모드

알림 받기

tsx

<div className="flex items-center gap-2">
  <Switch id="airplane-mode" />
  <Label htmlFor="airplane-mode">비행기 모드</Label>
</div>
<div className="flex items-center gap-2">
  <Switch id="notifications" defaultChecked />
  <Label htmlFor="notifications">알림 받기</Label>
</div>

Disabled

비활성화 상태의 스위치입니다.

tsx

<Switch disabled />
<Switch disabled defaultChecked />

Usage

tsx

import { Switch } from '@gpters-internal/ui';

function Example() {
  return (
    <div className="flex items-center gap-2">
      <Switch
        id="dark-mode"
        onCheckedChange={(checked) => console.log(checked)}
      />
      <label htmlFor="dark-mode">다크 모드</label>
    </div>
  );
}