Components
Neon Checkbox
Corner-cut cyberpunk checkbox with neon glow on check, animated SVG checkmark, indeterminate state (dash), size presets, and accessible aria-checked semantics.
npx neonblade add neon-checkboxUSE CASE — TASK LIST
CALIBRATE TARGETING ARRAY
Subsystem: WEAPONS
SYNC NEURAL HANDSHAKE
Subsystem: INTERFACE
DEPLOY FIREWALL PATCH v4.7
Subsystem: SECURITY
INITIATE CORE DIAGNOSTICS
Subsystem: POWER
VARIANTS
COLORS
SIZES
STATES
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | - | Controlled checked state. |
defaultChecked | boolean | false | Default checked state (uncontrolled). |
indeterminate | boolean | false | Renders a dash instead of a checkmark (partial selection). |
onChange | (checked: boolean) => void | - | Change handler called with the new checked value. |
color | "cyan" | "pink" | "green" | string | "cyan" | Neon accent color for the checked box. |
size | "sm" | "md" | "lg" | "md" | Box size preset. |
variant | "square" | "corner-cut" | "square" | Box style. square is a standard bordered box; corner-cut clips the bottom-right corner with a proper bordered diagonal. |
disabled | boolean | false | Disable the checkbox. |
label | string | - | Label text displayed next to the box. |
className | string | - | Additional className on the wrapper. |
id | string | - | id for the input. Auto-generated if omitted. |