폼과 선택@neumorphism-ui/checkbox

Checkbox

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

@neumorphism-ui/checkbox

미리보기

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

npx shadcn@latest add @neumorphism-ui/checkbox

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

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

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

<div className="flex items-center gap-2">
  <Checkbox id="updates" defaultChecked />
  <Label htmlFor="updates">제품 업데이트 받기</Label>
</div>

컴포넌트	속성	타입	기본값	설명
`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 속성입니다.