Checkbox

Source: packages/shared/components/ui/checkbox.tsx Primitives: @radix-ui/react-checkbox

import { Checkbox } from "@prosper/shared/components/ui/checkbox";

---

Preview

Accept terms and conditions

Receive marketing emails

Disabled option

Props

Extends Radix Checkbox.Root props:

Prop	Type	Default	Description
checked	boolean | "indeterminate"	—	Controlled checked state
onCheckedChange	(checked: boolean) => void	—	Change handler
disabled	boolean	false	Disables checkbox
className	string	—	Additional classes

---

Default Styling

• Size: size-4 (16px)
• Border radius: rounded-[4px]
• Checked: bg-primary text-primary-foreground
• Focus: ring with ring-ring/50

---

Usage Example

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

---

Used In

• Landing: job-detail (application form — relocate, travel, consent checkboxes)

---

Notes

• Override in Landing job-detail: className="mt-1" adds top margin to vertically align the checkbox with multi-line label text.
• Not currently used in the admin app.