Skip to Content
ComponentsFoundationFormSwitch

Switch

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

개요

Switch는 설정을 켜고 끄는 토글 컴포넌트입니다. 즉각적인 효과를 주는 설정에 사용하며, 체크박스와 달리 바로 적용됩니다.

주요 특징:

  • ON/OFF 토글
  • 3가지 Size (sm, md, lg)
  • Label 위치 조절
  • Disabled 상태

사용 사례:

  • 알림 설정
  • 기능 활성화/비활성화
  • 다크 모드 토글
  • 자동 저장 설정

설치

npx @vortex/cli add switch --package foundation

기본 사용법

import { Switch } from "@vortex/ui-foundation";
 
export default function Example() {
  return <Switch />;
}

Variants (변형)

기본 스위치

<Switch checked={enabled} onCheckedChange={setEnabled} />

Label 포함

<div className="flex items-center space-x-sm">
  <Switch id="airplane-mode" />
  <label htmlFor="airplane-mode">비행기 모드</label>
</div>

Sizes (크기)

<Switch size="sm" />
<Switch size="md" />
<Switch size="lg" />

Label 위치

Left

<div className="flex items-center space-x-sm">
  <label>알림 받기</label>
  <Switch />
</div>

Right (기본)

<div className="flex items-center space-x-sm">
  <Switch />
  <label>알림 받기</label>
</div>

Props API

PropTypeDefaultDescription
checkedbooleanfalse스위치 상태
defaultCheckedbooleanfalse기본 스위치 상태
disabledbooleanfalse비활성화 상태
size’sm’ | ‘md’ | ‘lg''md’크기
onCheckedChange(checked) => void-상태 변경 핸들러
classNamestring-추가 CSS 클래스

접근성

Switch 컴포넌트는 WCAG 2.1 AA 기준을 준수합니다.

ARIA 속성:

  • role="switch" (자동 적용)
  • aria-checked (스위치 상태)
  • aria-label (Label 없을 경우 필수)

키보드 네비게이션:

  • Space: 토글
  • Tab: 다음 요소로 이동

스크린 리더 지원:

  • ON/OFF 상태 안내
  • Label 텍스트 읽힘

예제

예제 1: 설정 패널

export default function SettingsPanel() {
  const [notifications, setNotifications] = useState(true);
  const [darkMode, setDarkMode] = useState(false);
  const [autoSave, setAutoSave] = useState(true);
 
  return (
    <div className="space-y-md">
      <div className="flex items-center justify-between">
        <div>
          <h4>알림</h4>
          <p className="text-sm text-gray-600">새로운 메시지 알림</p>
        </div>
        <Switch checked={notifications} onCheckedChange={setNotifications} />
      </div>
      <div className="flex items-center justify-between">
        <div>
          <h4>다크 모드</h4>
          <p className="text-sm text-gray-600">어두운 테마 사용</p>
        </div>
        <Switch checked={darkMode} onCheckedChange={setDarkMode} />
      </div>
      <div className="flex items-center justify-between">
        <div>
          <h4>자동 저장</h4>
          <p className="text-sm text-gray-600">변경사항 자동 저장</p>
        </div>
        <Switch checked={autoSave} onCheckedChange={setAutoSave} />
      </div>
    </div>
  );
}

예제 2: 토글 리스트

export default function FeatureToggles() {
  const features = [
    { id: "feature1", name: "기능 1", enabled: true },
    { id: "feature2", name: "기능 2", enabled: false },
    { id: "feature3", name: "기능 3", enabled: true },
  ];
 
  return (
    <div className="space-y-sm">
      {features.map((feature) => (
        <div
          key={feature.id}
          className="flex items-center justify-between p-md border rounded"
        >
          <span>{feature.name}</span>
          <Switch defaultChecked={feature.enabled} />
        </div>
      ))}
    </div>
  );
}

관련 컴포넌트

Last updated on
SelectInput