Checkbox

@hua-labs/ui

v1.1.0

레이블, 설명, 다양한 스타일 옵션을 지원하는 체크박스 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Checkbox } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 체크박스

이용약관에 동의합니다

설명 포함

뉴스레터 수신

주간 업데이트와 소식을 받아보세요

마케팅 이메일

프로모션 및 업데이트 정보를 받습니다

제어됨

값:

선택 안됨

알림 활성화

중요 업데이트에 대한 푸시 알림을 받습니다

변형

default

Default variant

outline

Outline variant

filled

Filled variant

glass

Glass variant

크기

Small checkbox

Medium checkbox

Large checkbox

상태

Normal state

Error state

Success state

Disabled state

Disabled checked

Props

이름	타입	기본값	설명
`variant`	`"default" \| "outline" \| "filled" \| "glass"`	`"default"`	시각적 스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	체크박스 크기
`label`	`string`	-	체크박스 레이블 텍스트
`description`	`string`	-	도움말 설명 텍스트
`error`	`boolean`	`false`	에러 상태
`success`	`boolean`	`false`	성공 상태
`checked`	`boolean`	-	제어되는 체크 상태
`defaultChecked`	`boolean`	-	Initial checked state (uncontrolled)
`disabled`	`boolean`	`false`	체크박스 비활성화

코드 예시

기본 사용법

import { Checkbox } from '@hua-labs/ui/form';

<Checkbox label="I agree to the terms" />

설명 포함

<Checkbox
  label="Receive newsletter"
  description="Get weekly updates and news"
/>

제어 모드

const [checked, setChecked] = useState(false);

<Checkbox
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
  label="Enable notifications"
/>

접근성

•aria-checked: 스크린 리더를 위한 체크 상태 전달
•aria-invalid: 에러 상태 시 적용
•레이블 연결: htmlFor로 레이블 연결
•키보드 지원: Space 키로 토글

FormControl Radio