Checkbox docs + preview (#179)

@stellar/design-system-website/docs/components/inputs/checkbox.mdx

@@ -0,0 +1,19 @@
+---
+slug: /checkbox
+---
+
+# Checkbox
+
+<ComponentDescription componentName="Checkbox" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Checkbox">
+  <Checkbox fieldSize="md" id="checkbox" />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Checkbox" />

@stellar/design-system-website/src/componentPreview/checkboxPreview.tsx

@@ -0,0 +1,79 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const checkboxPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "label",
+      customValue: "Label",
+      options: [
+        {
+          value: "",
+          label: "No label",
+        },
+        {
+          value: "label",
+          label: "Label",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "fieldSize",
+      options: [
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "xs",
+          label: "XS",
+        },
+      ],
+    },
+    {
+      type: "checkbox",
+      prop: "disabled",
+      label: "Disabled",
+    },
+    {
+      type: "checkbox",
+      prop: "isError",
+      label: "Error",
+    },
+    {
+      type: "select",
+      prop: "note",
+      customValue: "Note message",
+      options: [
+        {
+          value: "",
+          label: "No note",
+        },
+        {
+          value: "note",
+          label: "Note",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "error",
+      customValue: "Error message",
+      options: [
+        {
+          value: "",
+          label: "No error",
+        },
+        {
+          value: "error",
+          label: "Error",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -12,6 +12,7 @@ import { badgePreview } from "@site/src/componentPreview/badgePreview";
 import { bannerPreview } from "@site/src/componentPreview/bannerPreview";
 import { buttonPreview } from "@site/src/componentPreview/buttonPreview";
 import { captionPreview } from "@site/src/componentPreview/captionPreview";
+import { checkboxPreview } from "@site/src/componentPreview/checkboxPreview";
 import { headingPreview } from "@site/src/componentPreview/headingPreview";
 import { inputPreview } from "@site/src/componentPreview/inputPreview";
 import { linkPreview } from "@site/src/componentPreview/linkPreview";
@@ -35,6 +36,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Banner: bannerPreview,
   Button: buttonPreview,
   Caption: captionPreview,
+  Checkbox: checkboxPreview,
   Heading: headingPreview,
   Input: inputPreview,
   Link: linkPreview,

@stellar/design-system/src/components/Checkbox/index.tsx

@@ -1,27 +1,43 @@
 import React from "react";
-import "./styles.scss";
 import { FieldNote } from "../utils/FieldNote";
 import { Icon } from "../../icons";
+import "./styles.scss";
 
-interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+/** Including all valid [input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) */
+export interface CheckboxProps {
+  /** ID of the checkbox should be unique */
   id: string;
   // Note: cannot use "size" here because it's input's native property
+  /** Size of the checkbox */
   fieldSize: "md" | "sm" | "xs";
+  /** Label of the checkbox */
   label?: string | React.ReactNode;
+  /** Note message of the checkbox */
   note?: string | React.ReactNode;
+  /** Error message of the checkbox */
   error?: string | React.ReactNode;
+  /** Checkbox error without a message */
   isError?: boolean;
 }
 
-export const Checkbox: React.FC<CheckboxProps> = ({
+interface Props
+  extends CheckboxProps,
+    React.InputHTMLAttributes<HTMLInputElement> {
+  id: string;
+}
+
+/**
+ * `Checkbox` component is a form input element, which allows you to select single values for submission. All native HTML `checkbox` input attributes apply.
+ */
+export const Checkbox: React.FC<Props> = ({
   id,
   fieldSize,
   label,
   note,
   error,
   isError,
   ...props
-}: CheckboxProps) => {
+}: Props) => {
   const additionalClasses = [
     `Checkbox--${fieldSize}`,
     ...(props.disabled ? ["Checkbox--disabled"] : []),