Checkbox

서로 독립적인 선택, 동의 여부, 여러 항목을 동시에 선택하는 목록에 사용합니다.

미리보기

선택·부분 선택·비활성

선택된 가격 알림, 상태를 제어하는 부분 선택 워크스페이스, 사용할 수 없는 옵션을 비교합니다.

가격 알림 받기일부 워크스페이스에 적용됨사용할 수 없는 옵션

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/checkbox

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

선택·부분 선택·비활성

npx shadcn@latest add @neumorphism-ui/checkbox @neumorphism-ui/label

Registry JSON

사용법

Checkbox의 id와 보이는 Label의 htmlFor를 연결하세요. 초기 선택에는 defaultChecked를, 앱 상태로 관리할 때는 checked와 onCheckedChange를 사용합니다.

"use client";

import { useId } from "react";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export default function Example() {
  const id = useId();
  return (
    <div className="flex items-center gap-2">
      <Checkbox id={id} name="updates" />
      <Label htmlFor={id}>Receive product updates</Label>
    </div>
  );
}

API 레퍼런스

투명한 native input 위에 뉴모피즘 표면을 겹쳐 폼 제출과 브라우저 접근성을 유지합니다. controlled, uncontrolled, indeterminate 상태와 shadcn식 onCheckedChange를 제공합니다.

컴포넌트	속성	타입	기본값	설명
`Checkbox`	`checked`	`boolean \| "indeterminate"`	`—`	controlled 체크 또는 혼합 상태입니다.
`Checkbox`	`defaultChecked`	`boolean`	`false`	uncontrolled 초기 체크 상태입니다.
`Checkbox`	`onCheckedChange`	`(checked: boolean \| "indeterminate") => void`	`—`	체크 상태가 바뀔 때 호출됩니다.
`Checkbox`	`disabled`	`boolean`	`false`	입력과 포인터 동작을 비활성화합니다.
`Checkbox`	`name / value / required`	`native input props`	`—`	폼 제출에 사용하는 네이티브 checkbox 속성입니다.