본문으로 건너뛰기

Switch

사용자가 설정을 켜거나 끄는 상태를 토글할 수 있게 하는 컴포넌트입니다.

가져오기​

import { Switch } from 'react-common-components-library';

기본 사용법​

<Switch>비행기 모드</Switch>
비행기 모드

제어 컴포넌트로 사용​

function ControlledSwitchExample() {
  const [airplaneMode, setAirplaneMode] = React.useState(false);
  
  return (
    <Switch
      checked={airplaneMode}
      onChange={(e) => setAirplaneMode(e.target.checked)}
    >
      비행기 모드 {airplaneMode ? '켜짐' : '꺼짐'}
    </Switch>
  );
}
비행기 모드 꺼짐

비활성화 상태​

<Switch disabled>비활성화된 스위치</Switch>
비활성화된 스위치

크기 변형​

<Switch size="sm">작은 크기</Switch>
<Switch size="md">중간 크기</Switch>
<Switch size="lg">큰 크기</Switch>
작은 크기
중간 크기
큰 크기

에러 상태​

<Switch error>에러 상태</Switch>
에러 상태

속성​

속성타입기본값설명
childrenReactNode-스위치 레이블
size'sm' | 'md' | 'lg''md'스위치 크기
errorbooleanfalse에러 상태 표시
checkedboolean-스위치 체크 상태 (제어 컴포넌트로 사용할 때)
defaultCheckedboolean-스위치 기본 체크 상태 (비제어 컴포넌트로 사용할 때)
disabledbooleanfalse스위치 비활성화 여부
onChange(event: ChangeEvent<HTMLInputElement>) => void-스위치 상태 변경 시 호출될 콜백 함수
classNamestring-루트 요소에 적용할 CSS 클래스
wrapperClassNamestring-스위치 컨테이너에 적용할 CSS 클래스