Checkbox

Stable

A control that allows the user to toggle between checked and not checked.

Examples

Basic Usage

Accept terms and conditions

tsx

<Checkbox label="Accept terms and conditions" />

With Description

Enable NotificationsReceive alerts about network anomalies.

tsx

<Checkbox
  label="Enable Notifications"
  description="Receive alerts about network anomalies."
/>

Neon Variants

Cyan Mode

Purple Mode

Green Mode

tsx

<div className="flex flex-col gap-4">
  <Checkbox variant="neon" label="Cyan Mode" defaultChecked />
  <Checkbox variant="neonPurple" label="Purple Mode" defaultChecked />
  <Checkbox variant="neonGreen" label="Green Mode" defaultChecked />
</div>

Indeterminate State

Select All Logs

tsx

<Checkbox indeterminate label="Select All Logs" />

API Reference

Property	Description	Type	Default
variant	Color and glow styling.	"default" \| "neon" \| "neonPurple" \| "neonGreen"	-
checkboxSize	Size of the checkbox square.	"sm" \| "md" \| "lg"	-
label	Text label rendered next to the checkbox.	string	-
description	Secondary text rendered below the label.	string	-
indeterminate	Forces the indeterminate (minus) icon state.	boolean	-