Switch

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

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

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

Property

Size

Switch의 크기를 설정합니다.

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

Switch의 체크 상태를 설정합니다.

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

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

Disabled

Switch의 비활성화 상태를 설정합니다.

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.ThumbPrimitive />
            </Switch.Root>
            <Switch.Root readOnly>
                <Switch.ThumbPrimitive />
            </Switch.Root>
        </div>
    );
}

Examples

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

Loading component documentation...

Switch.ThumbPrimitive

Loading component documentation...

Sheet

Sheet는 화면의 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다. 사이드바, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.

Tabs

Tabs는 관련된 콘텐츠를 탭 형태로 구성하여 사용자가 쉽게 전환할 수 있도록 하는 컴포넌트입니다. 키보드 내비게이션, 접근성, 다양한 스타일 변형을 지원합니다.

On this page