EN
5

Checkbox

마케팅 동의를 실수로 해제하지 않도록 도와주는 컨트롤입니다.

import { Checkbox } from "@chadcn/ui"
import { Label } from "@/components/ui/label"

export function CheckboxDemo() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">이용약관에 동의합니다</Label>
    </div>
  )
}

동작 방식

  • 체크박스가 뷰포트에서 벗어나면 자동으로 체크됩니다. 사용자가 스크롤하다가 실수로 중요한 동의 항목을 건너뛰지 않도록 도와줍니다.
  • 한 번 체크되면 해제할 수 없습니다. 중요한 동의 사항을 실수로 취소하는 것을 방지합니다.
  • 비활성화 상태에서는 항상 체크된 상태로 고정됩니다. 필드가 비활성화되어 있어도 사용자가 마케팅 동의를 놓치지 않도록 보장합니다.

설치

준비 중패키지가 아직 npm에 게시되지 않았습니다.
pnpm add @chadcn/ui

사용법

import "@chadcn/ui/styles.css"
import { Checkbox } from "@chadcn/ui"
<Checkbox />
준비 중패키지가 아직 npm에 게시되지 않았습니다.

예제

텍스트 포함

체크박스에 레이블과 설명 텍스트를 함께 사용합니다.

서비스 이용약관 및 개인정보 처리방침에 동의합니다.

import { Checkbox } from "@chadcn/ui"
import { Label } from "@/components/ui/label"

export function CheckboxWithText() {
  return (
    <div className="items-top flex gap-2">
      <Checkbox id="terms-text" />
      <div className="grid gap-1.5 leading-none">
        <Label htmlFor="terms-text">
          이용약관에 동의합니다
        </Label>
        <p className="text-sm text-muted-foreground">
          서비스 이용약관 및 개인정보 처리방침에 동의합니다.
        </p>
      </div>
    </div>
  )
}

비활성화

disabled prop으로 상호작용을 비활성화합니다.

import { Checkbox } from "@chadcn/ui"
import { Label } from "@/components/ui/label"

export function CheckboxDisabled() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms-disabled" disabled />
      <Label htmlFor="terms-disabled">
        이용약관에 동의합니다
      </Label>
    </div>
  )
}

API 레퍼런스

자세한 내용은 Radix UI 문서를 참고하세요.