Skip to Content
ComponentsIcignalSwitch

Switch

설정을 On/Off로 토글하는 스위치 컴포넌트

개요

Switch는 On/Off 상태를 전환하는 폼 컴포넌트입니다. 3가지 variant를 제공하며 On/Off 레이블을 커스터마이징할 수 있습니다.

주요 특징

  • ✅ 3가지 Variants: default, text-inside, text-outside
  • ✅ 크기 옵션: sm, md, lg
  • ✅ 레이블 커스터마이징: onLabel, offLabel
  • ✅ FormItem 통합: 레이블, 설명, 에러 메시지
  • ✅ 접근성: WAI-ARIA Switch 패턴
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

Variants

ONOFF
꺼짐켜짐

Variant 설명

Variant설명사용 사례
default기본 스위치일반 설정 토글
text-inside스위치 내부에 텍스트 표시ON/OFF 명확 표시
text-outside스위치 양쪽에 텍스트 표시상태 라벨 필요 시

Sizes

States

활성화 시 데이터가 실시간으로 업데이트됩니다

사용 예시

예시 1: 대시보드 설정

대시보드 동작을 설정합니다.

데이터를 실시간으로 업데이트합니다

5분마다 대시보드를 자동으로 갱신합니다

KPI 임계값 초과 시 알림을 받습니다

예시 2: 차트 옵션

차트 표시 옵션을 토글합니다.

숨김표시
숨김표시
ONOFF

API Reference

Props

PropTypeDefaultDescription
variant"default" | "text-inside" | "text-outside""default"스위치 변형
size"sm" | "md" | "lg""md"스위치 크기
onLabelstring-On 상태 텍스트
offLabelstring-Off 상태 텍스트
checkedboolean-체크 상태 (제어)
defaultCheckedboolean-기본 체크 상태
onCheckedChange(checked: boolean) => void-상태 변경 핸들러
disabledbooleanfalse비활성화 여부
labelstring-필드 레이블
labelWidthstring | number-레이블 너비
requiredbooleanfalse필수 여부
orientation"horizontal" | "vertical""horizontal"레이블-필드 배치 방향
descriptionstring-설명 텍스트
errorstring-에러 메시지
classNamestring-추가 CSS 클래스

기본 사용법

import { Switch } from "@vortex/ui-icignal"
 
<Switch label="알림" />
<Switch label="활성화" variant="text-inside" onLabel="ON" offLabel="OFF" />
<Switch label="표시" variant="text-outside" onLabel="켜짐" offLabel="꺼짐" />

접근성

ARIA 속성

<Switch label="실시간 업데이트" />

권장 사항

  • ✅ label로 스위치 목적 전달
  • ✅ 키보드: Space로 토글, Tab으로 이동
  • ✅ role="switch", aria-checked 자동 설정
  • ❌ 레이블 없이 단독 사용 지양

관련 컴포넌트

Last updated on
SelectTextarea