Checkbox

Interactive UI Explorer

아래에서 각 컴포넌트의 다양한 Variants States를 문서화된 형태로 테스트해볼 수 있습니다.

Checkbox

애니메이션이 적용된 커스텀 체크박스 컴포넌트입니다.
실제 input은 숨기고 시각적 요소로 체크 상태를 표현하며, 체크 시 부드러운 애니메이션이 적용됩니다.

기본 체크박스

라벨과 함께 사용하는 기본 체크박스

Default
<Checkbox label="이용약관" checked={checked} onChange={...} />
Live Preview
Checked
<Checkbox label="기본 체크" checked={true} onChange={...} />
Live Preview
No Label
<Checkbox checked={checked} onChange={...} />
Live Preview

States

체크박스의 다양한 상태 (disabled, error, helper text)

Disabled
<Checkbox label="비활성화" disabled />
Live Preview
Checked Disabled
<Checkbox label="체크 비활성" checked disabled />
Live Preview
Error
<Checkbox label="에러 상태" error="필수 항목입니다." />

필수 항목입니다.

Live Preview
Helper Text
<Checkbox label="도움말 포함" helperText="선택 사항입니다." />

선택 사항입니다.

Live Preview

실제 사용 예시

약관 동의 폼에서의 체크박스 사용 예시

Source Code
const [agreeTerms, setAgreeTerms] = useState(false);
const [agreeMarketing, setAgreeMarketing] = useState(false);
const [agreePrivacy, setAgreePrivacy] = useState(false);

<div className="space-y-3">
  <Checkbox 
    label="이용약관 동의 (필수)" 
    checked={agreeTerms}
    onChange={(e) => setAgreeTerms(e.target.checked)}
    error={!agreeTerms ? "필수 항목입니다." : undefined}
  />
  <Checkbox 
    label="개인정보 처리방침 동의 (필수)" 
    checked={agreePrivacy}
    onChange={(e) => setAgreePrivacy(e.target.checked)}
    error={!agreePrivacy ? "필수 항목입니다." : undefined}
  />
  <Checkbox 
    label="마케팅 정보 수신 동의 (선택)" 
    checked={agreeMarketing}
    onChange={(e) => setAgreeMarketing(e.target.checked)}
    helperText="이벤트 및 프로모션 정보를 받아보실 수 있습니다."
  />
</div>
        

필수 항목입니다.

필수 항목입니다.

이벤트 및 프로모션 정보를 받아보실 수 있습니다.

Live Preview