Switch

Switch는 사용자가 설정을 on/off로 전환할 수 있게 돕는 토글 컴포넌트입니다.

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

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

Property

Size

Switch 크기는 sm, md, lg 로 제공합니다.

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

export default function SwitchSize() {
    return (
        <div className="flex gap-8">
            <Switch.Root size="sm" />
            <Switch.Root size="md" />
            <Switch.Root size="lg" />
        </div>
    );
}

Checked

기능이 활성화된 상태를 의미합니다.

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

export default function SwitchChecked() {
    return (
        <div className="space-y-3">
            <Switch.Root />
            <Switch.Root defaultChecked />
        </div>
    );
}

Disabled

사용자가 상호작용할 수 없는 상태입니다. 액션을 수행하기 위한 특정 조건을 충족하지 않았거나 일시적으로 기능을 제한하려는 상황에서 사용합니다.

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

export default function SwitchDisabled() {
    return (
        <div className="space-y-3">
            <Switch.Root disabled />
            <Switch.Root disabled defaultChecked />
        </div>
    );
}

Read Only

사용자는 스위치 상태를 변경할 수 없지만, 현재 상태를 확인할 수 있도록 허용하는 상태입니다.

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

export default function SwitchReadOnly() {
    return (
        <div className="space-y-3">
            <Switch.Root readOnly defaultChecked>
                <Switch.Thumb />
            </Switch.Root>
            <Switch.Root readOnly>
                <Switch.Thumb />
            </Switch.Root>
        </div>
    );
}

Examples

States

Switch의 다양한 상태를 보여줍니다.

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

export default function SwitchStates() {
    return (
        <div className="flex gap-8">
            <Switch.Root />
            <Switch.Root defaultChecked />
            <Switch.Root disabled />
            <Switch.Root disabled defaultChecked />
        </div>
    );
}

Controlled

제어되는 Switch 컴포넌트의 사용 예시입니다.

Current state: Off

import { useState } from 'react';

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

export default function SwitchControlled() {
    const [checked, setChecked] = useState(false);

    return (
        <div className="space-y-4">
            <Switch.Root checked={checked} onCheckedChange={setChecked} />
            <p>Current state: {checked ? 'On' : 'Off'}</p>
        </div>
    );
}

Props Table

Switch.Root

Switch의 컴포넌트의 상태와 설정을 제공합니다.

Prop	Default	Type
render?	button	ReactElement
defaultChecked?	-	boolean
checked?	-	boolean
onCheckedChange?	-	function
disabled?	-	boolean
required?	-	boolean
name?	-	string
value?	on	string
size?	md	smmdlg
visuallyHidden?	false	boolean
readOnly?	false	boolean

Switch

On this page