CHECKBOX

Binary toggle built on Radix UI. Shows a filled square indicator when checked. Supports optional label with auto-generated ID binding.

DEPS:@radix-ui/react-checkbox

PREVIEW

ENABLE TARGETING

SHIELD MATRIX

OFFLINE SYSTEMS

INSTALLATION

BASH

npx shadcn@latest add @scificn/checkbox

USAGE

TSX

import { Checkbox } from '@/ui/checkbox'

export function Example() {
  return (
    <Checkbox
      label="ENABLE AUTO-TARGETING"
      onCheckedChange={(checked) => console.log(checked)}
    />
  )
}

STATES

UNCHECKED

CHECKED

DISABLED

CHECKED + DISABLED

CONTROLLED

TSX

import { useState } from 'react'
import { Checkbox } from '@/ui/checkbox'

export function Controlled() {
  const [checked, setChecked] = useState(false)
  return (
    <Checkbox
      label="ENGAGE WARP DRIVE"
      checked={checked}
      onCheckedChange={(v) => setChecked(v === true)}
    />
  )
}

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
label	string	—	Optional text label rendered next to the checkbox. Auto-generates the id/htmlFor binding.
checked	boolean \| "indeterminate"	—	Controlled checked state.
defaultChecked	boolean	false	Initial checked state (uncontrolled).
onCheckedChange	(checked: boolean \| "indeterminate") => void	—	Callback fired when the checked state changes.
disabled	boolean	false	Disables the checkbox and reduces opacity.
id	string	—	Override the auto-generated id.