Switch

Import

import { Switch } from '@vapor-ui/core';

Preview

Airplane mode

import { Switch } from '@vapor-ui/core';

export default function DefaultSwitch() {
    return (
        <Switch.Root>
            <Switch.Label>Airplane mode</Switch.Label>
            <Switch.Control />
        </Switch.Root>
    );
}

Props

Switch.Root

이름	타입	기본값	설명
checked	boolean	undefined	스위치의 현재 상태를 제어하는 제어 모드 prop입니다. true는 켜짐 상태, false는 꺼짐 상태를 의미합니다.
defaultChecked	boolean	undefined	비제어 모드에서 스위치의 초기 상태를 설정합니다.
onCheckedChange	(checked: boolean) => void	undefined	스위치의 상태가 변경될 때 호출되는 콜백입니다.
size	smmdlg	md	스위치의 크기를 설정합니다.
disabled	boolean	false	스위치를 비활성화하여 사용자 상호 작용을 차단합니다.
visuallyHidden	boolean	false	레이블을 시각적으로 숨깁니다. true 설정 시 레이블이 화면에 표시되지 않지만 스크린 리더는 읽을 수 있습니다.

Switch.Control

이름	타입	기본값	설명
id	stringundefined	-	컨트롤 요소의 id를 지정합니다. 값을 지정하지 않으면 Switch.Root 단계에서 생성된 고유 id가 자동으로 사용됩니다.

Switch.Label

이름	타입	기본값	설명
htmlFor	stringundefined	-	레이블이 연결될 Switch.Control 요소의 id를 지정합니다. 생략하면 같은 Switch.Root 안에서 발견된 Switch.Control id가 자동으로 대입되어 접근성이 유지됩니다.
children	React.ReactNode	-	레이블에 표시할 텍스트나 노드입니다.

Import

Preview

Props

Switch.Root

Switch.Control

Switch.Label

On this page