Checkbox

Checkbox는 여러 항목 중 복수 선택을 가능하게 하는 입력 컴포넌트입니다.

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

export default function DefaultCheckbox() {
    return <Checkbox.Root />;
}

Property

Size

Checkbox의 크기를 결정합니다.

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

export default function CheckboxSize() {
    return (
        <div className="flex items-center gap-4">
            <Checkbox.Root size="md" />
            <Checkbox.Root size="lg" />
        </div>
    );
}

Disabled

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

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

export default function CheckboxDisabled() {
    return (
        <div className="flex items-center gap-4">
            <Checkbox.Root disabled />
            <Checkbox.Root disabled checked />
        </div>
    );
}

Invalid

Checkbox의 유효하지 않음 상태를 설정합니다.

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

export default function CheckboxInvalid() {
    return (
        <div className="flex items-center gap-4">
            <Checkbox.Root invalid />
            <Checkbox.Root invalid checked />
        </div>
    );
}

Indeterminate

Checkbox의 혼합 상태 여부를 설정합니다.

Select All Fruits

AppleBananaOrange

import { useState } from 'react';

import { Checkbox, Text } from '@vapor-ui/core';

export default function CheckboxIndeterminate() {
    const [checkedItems, setCheckedItems] = useState({
        apple: false,
        banana: false,
        orange: false,
    });

    const allChecked = Object.values(checkedItems).every(Boolean);
    const isIndeterminate = Object.values(checkedItems).some(Boolean) && !allChecked;

    const handleSelectAll = (checked: boolean) => {
        setCheckedItems({
            apple: checked,
            banana: checked,
            orange: checked,
        });
    };

    const handleItemChange = (item: keyof typeof checkedItems, checked: boolean) => {
        setCheckedItems((prev) => ({
            ...prev,
            [item]: checked,
        }));
    };

    return (
        <div className="space-y-3">
            <Text
                render={<label />}
                typography="body2"
                className="flex items-center gap-2.5 font-medium"
            >
                <Checkbox.Root
                    checked={allChecked}
                    indeterminate={isIndeterminate}
                    onCheckedChange={handleSelectAll}
                    className="flex items-center gap-3"
                />
                Select All Fruits
            </Text>
            <div className="ml-6 space-y-2">
                <Text
                    render={<label />}
                    typography="body2"
                    className="flex items-center gap-2.5 cursor-pointer"
                >
                    <Checkbox.Root
                        checked={checkedItems.apple}
                        onCheckedChange={(checked) => handleItemChange('apple', checked)}
                        className="flex items-center gap-3"
                    />
                    Apple
                </Text>

                <Text
                    render={<label />}
                    typography="body2"
                    className="flex items-center gap-2.5 cursor-pointer"
                >
                    <Checkbox.Root
                        checked={checkedItems.banana}
                        onCheckedChange={(checked) => handleItemChange('banana', checked)}
                        className="flex items-center gap-3"
                    />
                    Banana
                </Text>

                <Text
                    render={<label />}
                    typography="body2"
                    className="flex items-center gap-2.5 cursor-pointer"
                >
                    <Checkbox.Root
                        checked={checkedItems.orange}
                        onCheckedChange={(checked) => handleItemChange('orange', checked)}
                        className="flex items-center gap-3"
                    />
                    Orange
                </Text>
            </div>
        </div>
    );
}

Read Only

Checkbox의 읽기 전용 상태를 설정합니다.

읽기 전용 (체크됨)읽기 전용 (체크 안됨)읽기 전용 (혼합 상태)

import { Checkbox, Flex } from '@vapor-ui/core';

export default function CheckboxReadOnly() {
    return (
        <Flex gap="$000" flexDirection="column">
            <label className="flex items-center gap-2">
                <Checkbox.Root readOnly defaultChecked />
                읽기 전용 (체크됨)
            </label>
            <label className="flex items-center gap-2">
                <Checkbox.Root readOnly />
                읽기 전용 (체크 안됨)
            </label>
            <label className="flex items-center gap-2">
                <Checkbox.Root readOnly indeterminate />
                읽기 전용 (혼합 상태)
            </label>
        </Flex>
    );
}

Props Table

Checkbox.Root

Loading component documentation...

Checkbox.IndicatorPrimitive

Loading component documentation...

Card

Card는 이미지와 텍스트, 일부 기능 버튼을 포함한 컨테이너로 콘텐츠를 제공합니다.

Collapsible

Collapsible은 콘텐츠를 접었다 펼칠 수 있는 대화형 컴포넌트입니다. 아코디언이나 확장 가능한 섹션을 구현할 때 사용합니다.

On this page