본문으로 건너뛰기

Checkbox

Checkbox는 사용자가 여러 항목 중에서 하나 이상을 선택할 수 있도록 하는 컴포넌트입니다. 이 컴포넌트는 선택 가능한 옵션 목록을 제공하고, 사용자가 여러 항목을 동시에 선택할 수 있습니다.

인터랙티브 예제​

아래 UI에서 다양한 속성을 직접 변경하여 체크박스의 모습을 확인해보세요.

textstring
체크박스 옆에 표시할 텍스트 내용입니다.
supportTextstring
텍스트 아래에 표시되는 추가 설명 텍스트입니다.
sizeselect
체크박스의 크기를 지정합니다.
indeterminateboolean
체크박스가 불확정 상태(일부 선택됨)인지 여부를 설정합니다.
disabledboolean
체크박스를 비활성화 상태로 설정합니다.
checkedboolean
체크박스의 선택 상태를 설정합니다.
classNamestring
체크박스 컴포넌트에 추가할 CSS 클래스입니다.

기본 사용법​

import { Checkbox } from '@ncds/ui-admin';

function App() {
  return <Checkbox text="약관에 동의합니다" />;
}

Props​

PropTypeDefaultDescription
textReactNode-체크박스 옆에 표시할 텍스트 내용입니다.
supportTextstring-텍스트 아래에 표시되는 추가 설명 텍스트입니다.
size'sm' | 'md''sm'체크박스의 크기를 지정합니다.
indeterminatebooleanfalse체크박스가 불확정 상태(일부 선택됨)인지 여부를 설정합니다.
disabledbooleanfalse체크박스를 비활성화 상태로 설정합니다.
checkedbooleanfalse체크박스의 선택 상태를 설정합니다.
classNamestring-체크박스 컴포넌트에 추가할 CSS 클래스입니다.
checkboxRefRefCallback<HTMLInputElement> | MutableRefObject<HTMLInputElement | null>-체크박스 요소에 대한 참조를 설정합니다.
onChange(e: ChangeEvent<HTMLInputElement>) => void-체크박스 상태가 변경될 때 호출되는 함수입니다.
destructivebooleanfalse위험한 작업을 나타내는 스타일을 적용합니다.

상세 예제 (Detailed Examples)​

크기 (Size)​

체크박스는 두 가지 크기를 지원합니다: sm(작음)과 md(중간)

상태 (States)​

체크박스는 다양한 상태를 지원합니다: 기본, 선택됨, 비활성화, 불확정.

부가 텍스트 (Support Text)​

체크박스에 추가 설명 텍스트를 포함할 수 있습니다.

에러 표시 (Destructive)​

에러가 발생했을 때 노출되는 체크박스는 destructive 속성을 통해 강조할 수 있습니다.

이벤트 처리 (Event Handling)​

체크박스의 상태 변경을 감지하고 처리하는 방법입니다.

import { Checkbox } from '@ncds/ui-admin';
import { useState } from 'react';

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = (e) => {
    setIsChecked(e.target.checked);
    console.log(`체크박스 상태: ${e.target.checked}`);
  };

  return <Checkbox text="이용약관 동의" checked={isChecked} onChange={handleChange} />;
}