Initial commit

docs/components/checkbox.md

@@ -0,0 +1,62 @@
+- Home
+- Components
+- Checkbox
+
+# Checkbox
+
+A control that allows the user to toggle between checked and not checked.
+
+## Props
+
+
+Prop	Type	Default	Description
+checkall	boolean	false	Renders a square fill style for "select all" semantics
+...Radix props	ComponentProps<typeof CheckboxPrimitive.Root>	-	All Radix checkbox props
+
+## Types
+
+```
+interface CheckboxProps extends ComponentProps<typeof CheckboxPrimitive.Root> {
+  checkall?: boolean;
+  className?: string;
+}
+```
+
+## Usage
+
+```
+<div className="flex flex-col gap-6">
+  <div className="flex items-center gap-3">
+    <Checkbox id="Checkbox" />
+    <label htmlFor="Checkbox">Checkbox</label>
+  </div>
+  <div className="flex items-center gap-3">
+    <Checkbox id="Checkbox disabled" disabled />
+    <label htmlFor="Checkbox disabled">Checkbox disabled</label>
+  </div>
+  <div className="flex items-center gap-3">
+    <Checkbox id="Checkbox disabled checked" disabled defaultChecked />
+    <label htmlFor="Checkbox disabled checked">Checkbox disabled checked</label>
+  </div>
+  <div className="flex items-center gap-3">
+    <Checkbox id="checkall" checkall />
+    <label htmlFor="checkall">Check all</label>
+  </div>
+  <div className="flex items-center gap-3">
+    <Checkbox id="Check all disabled" checkall disabled />
+    <label htmlFor="Check all disabled">Check all disabled</label>
+  </div>
+  <div className="flex items-center gap-3">
+    <Checkbox id="Check all disabled checked" defaultChecked disabled checkall />
+    <label htmlFor="Check all disabled checked">Check all disabled checked</label>
+  </div>
+</div>
+```
+
+### Examples
+
+```
+<Checkbox id="opt-in" />
+<Checkbox id="select-all" checkall />
+```
+