diff --git a/package.json b/package.json
index 075a2b978..dd8dbbeb7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.17.1",
+  "version": "1.17.2",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
deleted file mode 100644
index 19dfd9fdd..000000000
--- a/src/components/Checkbox.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { LabelHTMLAttributes, PropsWithChildren } from "react";
-import { colors } from "../theme";
-import styled from "styled-components";
-import { InputHTMLAttributes } from "react";
-import { whiteCheckmark, grayCheckmark, redCheckmark } from "./svgs/checkmarksvgs";
-
-export type CheckboxVariant = keyof typeof checkboxVariants;
-export type CheckboxSize = 1.4 | 1.6 | 1.8 | 2;
-
-export const checkboxVariants = {
-  primary: {
-    backgroundColor: colors.palette.mediumBlue,
-    color: 'inherit',
-    unCheckedBorder: `1px solid ${colors.palette.neutralThin}`,
-    checkedBorder: `1px solid ${colors.palette.mediumBlue}`,
-    backgroundImage: whiteCheckmark
-  },
-  light: {
-    backgroundColor: colors.palette.white,
-    color: 'inherit',
-    unCheckedBorder: `1px solid ${colors.palette.pale}`,
-    checkedBorder: `1px solid ${colors.palette.pale}`,
-    backgroundImage: grayCheckmark
-  },
-  error: {
-    backgroundColor: colors.palette.paleRed,
-    color: colors.palette.darkRed,
-    unCheckedBorder: `1px solid ${colors.palette.lightRed}`,
-    checkedBorder: `1px solid ${colors.palette.lightRed}`,
-    backgroundImage: redCheckmark
-  },
-  disabled: {
-    backgroundColor: colors.palette.white,
-    color: 'inherit',
-    unCheckedBorder: `1px solid ${colors.palette.pale}`,
-    checkedBorder: `1px solid ${colors.palette.pale}`,
-    backgroundImage: 'none'
-  }
-} as const;
-
-const StyledLabel = styled.label<{ bold: boolean; variant: CheckboxVariant; isDisabled?: boolean; }>`
-  font-size: 1.6rem;
-  display: flex;
-  align-items: center;
-  font-weight: ${props => props.bold ? 700 : 400};
-  color: ${(props => props.isDisabled ? colors.palette.neutralLight : checkboxVariants[props.variant].color)};
-`;
-
-// https://moderncss.dev/pure-css-custom-checkbox-style/
-const StyledInput = styled.input<{ variant: CheckboxVariant; checkboxSize: CheckboxSize; isDisabled?: boolean; }>`
-  appearance: none;
-  /* For iOS < 15 to remove gradient background */
-  background-color: ${colors.palette.white};
-  opacity: ${(props => props.isDisabled ? '0.4' : '1')};
-  border: ${props => props.isDisabled ? `1px solid ${colors.palette.pale}` : checkboxVariants[props.variant].unCheckedBorder};
-  border-radius: 0.2rem;
-  transform: translateY(-0.075em);
-  width: ${props => props.checkboxSize}rem;
-  height: ${props => props.checkboxSize}rem;
-  margin: 0 1.6rem 0 0;
-  display: grid;
-  place-content: center;
-
-  &::before {
-    content: "";
-    width: ${props => props.checkboxSize}rem;
-    height: ${props => props.checkboxSize}rem;
-    border: ${props => checkboxVariants[props.variant].checkedBorder};
-    border-radius: 0.2rem;
-    transform: scale(0);
-    background-color: ${props => checkboxVariants[props.variant].backgroundColor};
-    background-image: url('${props => checkboxVariants[props.variant].backgroundImage}');
-    background-size: 80%;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
-
-  &:checked::before {
-    transform: scale(1);
-    opacity: ${(props => props.isDisabled ? 0 : 1)};
-  }
-  `;
-
-type CheckboxProps = PropsWithChildren<
-  Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
-  variant?: CheckboxVariant;
-  size?: CheckboxSize;
-  bold?: boolean;
-  labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
-}>;
-
-export const Checkbox = ({ children, disabled, variant = 'primary', bold = false, size = 1.6, labelProps, ...props }: CheckboxProps) => {
-  return (
-    <StyledLabel bold={bold} variant={variant} isDisabled={disabled} {...labelProps}>
-      <StyledInput {...props} type="checkbox" variant={variant} checkboxSize={size} isDisabled={disabled} />
-      {children}
-    </StyledLabel>
-  );
-};
diff --git a/src/components/Checkbox.spec.tsx b/src/components/Checkbox/Checkbox.spec.tsx
similarity index 100%
rename from src/components/Checkbox.spec.tsx
rename to src/components/Checkbox/Checkbox.spec.tsx
diff --git a/src/components/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
similarity index 100%
rename from src/components/Checkbox.stories.tsx
rename to src/components/Checkbox/Checkbox.stories.tsx
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
new file mode 100644
index 000000000..6049171c5
--- /dev/null
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -0,0 +1,30 @@
+import { LabelHTMLAttributes, PropsWithChildren } from "react";
+import {  checkboxLabelStyles, checkboxInputStyles, CheckboxVariant, CheckboxSize } from "./sharedCheckboxStyles";
+import styled from "styled-components";
+import { InputHTMLAttributes } from "react";
+
+const StyledLabel = styled.label<{ bold: boolean; variant: CheckboxVariant; isDisabled?: boolean; }>`
+  ${checkboxLabelStyles}
+`;
+
+// https://moderncss.dev/pure-css-custom-checkbox-style/
+const StyledInput = styled.input<{ variant: CheckboxVariant; checkboxSize: CheckboxSize; isDisabled?: boolean; }>`
+  ${checkboxInputStyles}
+`;
+
+type CheckboxProps = PropsWithChildren<
+  Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+  variant?: CheckboxVariant;
+  size?: CheckboxSize;
+  bold?: boolean;
+  labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
+}>;
+
+export const Checkbox = ({ children, disabled, variant = 'primary', bold = false, size = 1.6, labelProps, ...props }: CheckboxProps) => {
+  return (
+    <StyledLabel bold={bold} variant={variant} isDisabled={disabled} {...labelProps}>
+      <StyledInput {...props} type="checkbox" variant={variant} checkboxSize={size} isDisabled={disabled} />
+      {children}
+    </StyledLabel>
+  );
+};
diff --git a/src/components/__snapshots__/Checkbox.spec.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
similarity index 67%
rename from src/components/__snapshots__/Checkbox.spec.tsx.snap
rename to src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
index 06cb1bf0e..197f0c3f5 100644
--- a/src/components/__snapshots__/Checkbox.spec.tsx.snap
+++ b/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
@@ -3,10 +3,10 @@
 exports[`Checkbox allows setting props on label 1`] = `
 <label
   aria-label="custom label"
-  className="sc-bczRLJ gvjopC"
+  className="sc-bczRLJ XfrOB"
 >
   <input
-    className="sc-gsnTZi gDsstp"
+    className="sc-gsnTZi dskNep"
     type="checkbox"
   />
   Click Me
@@ -15,10 +15,10 @@ exports[`Checkbox allows setting props on label 1`] = `
 
 exports[`Checkbox handles disabled state 1`] = `
 <label
-  className="sc-bczRLJ Kigrj"
+  className="sc-bczRLJ jDFcYw"
 >
   <input
-    className="sc-gsnTZi cZFRiM"
+    className="sc-gsnTZi dJvfbo"
     type="checkbox"
   />
   Click Me
@@ -27,10 +27,10 @@ exports[`Checkbox handles disabled state 1`] = `
 
 exports[`Checkbox handles options 1`] = `
 <label
-  className="sc-bczRLJ gvjopC"
+  className="sc-bczRLJ XfrOB"
 >
   <input
-    className="sc-gsnTZi gDsstp"
+    className="sc-gsnTZi dskNep"
     type="checkbox"
   />
   Click Me
@@ -39,10 +39,10 @@ exports[`Checkbox handles options 1`] = `
 
 exports[`Checkbox matches snapshot 1`] = `
 <label
-  className="sc-bczRLJ duZDSR"
+  className="sc-bczRLJ fIuhsq"
 >
   <input
-    className="sc-gsnTZi bBmYov"
+    className="sc-gsnTZi ehAXiz"
     type="checkbox"
   />
   Click Me
diff --git a/src/components/Checkbox/sharedCheckboxStyles.ts b/src/components/Checkbox/sharedCheckboxStyles.ts
new file mode 100644
index 000000000..3477d5732
--- /dev/null
+++ b/src/components/Checkbox/sharedCheckboxStyles.ts
@@ -0,0 +1,101 @@
+import { css } from "styled-components";
+import { colors } from "../../theme";
+import { whiteCheckmark, grayCheckmark, redCheckmark } from "../svgs/checkmarksvgs";
+
+export type CheckboxVariant = keyof typeof checkboxVariants;
+export type CheckboxSize = 1.4 | 1.6 | 1.8 | 2;
+
+export const checkboxVariants = {
+  primary: {
+    backgroundColor: colors.palette.mediumBlue,
+    color: 'inherit',
+    unCheckedBorder: `1px solid ${colors.palette.neutralThin}`,
+    checkedBorder: `1px solid ${colors.palette.mediumBlue}`,
+    backgroundImage: whiteCheckmark
+  },
+  light: {
+    backgroundColor: colors.palette.white,
+    color: 'inherit',
+    unCheckedBorder: `1px solid ${colors.palette.pale}`,
+    checkedBorder: `1px solid ${colors.palette.pale}`,
+    backgroundImage: grayCheckmark
+  },
+  error: {
+    backgroundColor: colors.palette.paleRed,
+    color: colors.palette.darkRed,
+    unCheckedBorder: `1px solid ${colors.palette.lightRed}`,
+    checkedBorder: `1px solid ${colors.palette.lightRed}`,
+    backgroundImage: redCheckmark
+  },
+  disabled: {
+    backgroundColor: colors.palette.white,
+    color: 'inherit',
+    unCheckedBorder: `1px solid ${colors.palette.pale}`,
+    checkedBorder: `1px solid ${colors.palette.pale}`,
+    backgroundImage: 'none'
+  }
+} as const;
+
+// Checkbox label styles
+export const checkboxLabelStyles = css<{
+  bold?: boolean;
+  variant: CheckboxVariant;
+  isDisabled?: boolean;
+}>`
+  font-size: 1.6rem;
+  display: flex;
+  align-items: center;
+  font-weight: ${({ bold }) => (bold ? 700 : 400)};
+  color: ${({ isDisabled, variant }) =>
+    isDisabled
+      ? colors.palette.neutralLight
+      : checkboxVariants[variant].color};
+`;
+
+// Checkbox input/selection styles
+export const checkboxInputStyles = css<{
+  variant: CheckboxVariant;
+  checkboxSize: CheckboxSize;
+  isDisabled?: boolean;
+}>`
+  appearance: none;
+  background-color: ${colors.palette.white};
+  opacity: ${({ isDisabled }) => (isDisabled ? '0.4' : '1')};
+  border: ${({ isDisabled, variant }) =>
+    isDisabled
+      ? `1px solid ${colors.palette.pale}`
+      : checkboxVariants[variant].unCheckedBorder};
+  border-radius: 0.2rem;
+  transform: translateY(-0.075em);
+  width: ${({ checkboxSize }) => checkboxSize}rem;
+  height: ${({ checkboxSize }) => checkboxSize}rem;
+  margin: 0 1.6rem 0 0;
+  display: grid;
+  place-content: center;
+
+  &::before {
+    content: "";
+    border-radius: 0.2rem;
+    width: ${({ checkboxSize }) => checkboxSize}rem;
+    height: ${({ checkboxSize }) => checkboxSize}rem;
+    border: ${({ variant }) => checkboxVariants[variant].checkedBorder};
+    border-radius: 0.2rem;
+    transform: scale(0);
+    background-color: ${({ variant }) => checkboxVariants[variant].backgroundColor};
+    background-image: url('${({ variant }) => checkboxVariants[variant].backgroundImage}');
+    background-size: 80%;
+    background-position: center;
+    background-repeat: no-repeat;
+    transform: scale(0);
+  }
+
+  &:checked::before {
+    transform: scale(1);
+    opacity: ${({ isDisabled }) => (isDisabled ? 0 : 1)};
+  }
+`;
+
+export const checkboxSelectionSlotCheckedStyles = css<{ isDisabled?: boolean }>`
+  transform: scale(1);
+  opacity: ${({ isDisabled }) => (isDisabled ? 0 : 1)};
+`;
\ No newline at end of file
diff --git a/src/components/Tree.stories.tsx b/src/components/Tree.stories.tsx
deleted file mode 100644
index a2beefc9f..000000000
--- a/src/components/Tree.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Checkbox } from "./Checkbox";
-import { Tree, TreeChevron, TreeItem, TreeItemContent } from "./Tree";
-
-export const Default = () => {
-  return <Tree>
-  <TreeItem id="1" textValue="1">
-    <TreeItemContent>
-      <Checkbox
-        value={"one"}
-        slot="check"
-        size={1.4}
-      >
-        First
-      </Checkbox>
-      <TreeChevron>Show/Hide</TreeChevron>
-    </TreeItemContent>
-    <TreeItem id="2" textValue="2">
-      <TreeItemContent>
-        <Checkbox
-          value={"two"}
-          slot="check"
-          size={1.4}
-        >
-           Second
-        </Checkbox>
-        <TreeChevron>Show/Hide</TreeChevron>
-      </TreeItemContent>
-      <TreeItem id="3" textValue="3">
-        <TreeItemContent>
-          <Checkbox
-            value={"third"}
-            slot="check"
-            size={1.4}
-          >
-             Third
-          </Checkbox>
-        </TreeItemContent>
-      </TreeItem>
-    </TreeItem>
-  </TreeItem>
-</Tree>
-};
diff --git a/src/components/Tree.spec.tsx b/src/components/Tree/Tree.spec.tsx
similarity index 96%
rename from src/components/Tree.spec.tsx
rename to src/components/Tree/Tree.spec.tsx
index 60d438acb..105c31eb3 100644
--- a/src/components/Tree.spec.tsx
+++ b/src/components/Tree/Tree.spec.tsx
@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 import { Tree, TreeChevron, TreeItem, TreeItemContent } from './Tree';
-import { Checkbox } from './Checkbox';
+import { Checkbox } from '../Checkbox/Checkbox';
 
 describe('Tree', () => {
   it('matches snapshot', () => {
diff --git a/src/components/Tree/Tree.stories.tsx b/src/components/Tree/Tree.stories.tsx
new file mode 100644
index 000000000..2cc1999fc
--- /dev/null
+++ b/src/components/Tree/Tree.stories.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { TreeCheckbox as Checkbox } from "./TreeCheckbox";
+import { Tree, TreeChevron, TreeItem, TreeItemContent } from "./Tree";
+
+
+
+import type { Selection } from "@react-types/shared";
+
+export const Default = () => {
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set());
+
+  return (
+    <Tree
+      selectedKeys={selectedKeys}
+      onSelectionChange={setSelectedKeys}
+      selectionMode="multiple"
+    >
+      <TreeItem id="one" textValue="First">
+        <TreeItemContent>
+          <Checkbox
+            value={"one"}
+            slot="selection"
+            size={1.4}
+          >
+            First
+          </Checkbox>
+          <TreeChevron>Show/Hide</TreeChevron>
+        </TreeItemContent>
+        <TreeItem id="two" textValue="Second">
+          <TreeItemContent>
+            <Checkbox
+              value={"two"}
+              slot="selection"
+              size={1.4}
+            >
+              Second
+            </Checkbox>
+            <TreeChevron>Show/Hide</TreeChevron>
+          </TreeItemContent>
+          <TreeItem id="three" textValue="Third">
+            <TreeItemContent>
+              <Checkbox
+                value={"three"}
+                slot="selection"
+                size={1.4}
+              >
+                Third
+              </Checkbox>
+            </TreeItemContent>
+          </TreeItem>
+        </TreeItem>
+      </TreeItem>
+    </Tree>
+  );
+};
diff --git a/src/components/Tree.tsx b/src/components/Tree/Tree.tsx
similarity index 97%
rename from src/components/Tree.tsx
rename to src/components/Tree/Tree.tsx
index eb5c46452..6b167c480 100644
--- a/src/components/Tree.tsx
+++ b/src/components/Tree/Tree.tsx
@@ -1,5 +1,5 @@
 import * as RAC from "react-aria-components";
-import { colors } from "../theme";
+import { colors } from "../../theme";
 import styled from "styled-components";
 
 export const Tree = styled(RAC.Tree)`
diff --git a/src/components/Tree/TreeCheckbox.spec.tsx b/src/components/Tree/TreeCheckbox.spec.tsx
new file mode 100644
index 000000000..bd66d4577
--- /dev/null
+++ b/src/components/Tree/TreeCheckbox.spec.tsx
@@ -0,0 +1,32 @@
+import { TreeCheckbox } from './TreeCheckbox';
+import renderer from 'react-test-renderer';
+
+describe('TreeCheckbox', () => {
+  it('matches snapshot', () => {
+    const tree = renderer.create(
+      <TreeCheckbox>Click Me</TreeCheckbox>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('handles options', () => {
+    const tree = renderer.create(
+      <TreeCheckbox bold size={2} variant='light'>Click Me</TreeCheckbox>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('handles disabled state', () => {
+    const tree = renderer.create(
+      <TreeCheckbox isDisabled>Click Me</TreeCheckbox>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('supports slot="selection"', () => {
+    const tree = renderer.create(
+      <TreeCheckbox slot="selection">Click Me</TreeCheckbox>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
\ No newline at end of file
diff --git a/src/components/Tree/TreeCheckbox.stories.tsx b/src/components/Tree/TreeCheckbox.stories.tsx
new file mode 100644
index 000000000..04c56198d
--- /dev/null
+++ b/src/components/Tree/TreeCheckbox.stories.tsx
@@ -0,0 +1,73 @@
+import styled from "styled-components";
+import { TreeCheckbox } from "./TreeCheckbox";
+
+const CheckboxGroup = styled.div`
+  text-transform: capitalize;
+
+  & + & {
+    margin-top: 3.2rem;
+  }
+
+  > * + * {
+    margin-top: 0.5rem;
+  }
+`;
+
+type CheckboxProps = React.ComponentProps<typeof TreeCheckbox>;
+
+const renderCheckboxes = (
+  variant: CheckboxProps['variant'],
+  size: CheckboxProps['size']
+) => (
+  <CheckboxGroup>
+    <h2>Size {size}</h2>
+    <TreeCheckbox slot='selection' {...{ size, variant }}>Checkbox label</TreeCheckbox>
+    <TreeCheckbox slot='selection' {...{ size, variant }} defaultSelected>
+      Checkbox label
+    </TreeCheckbox>
+    <TreeCheckbox slot='selection' {...{ size, variant }} defaultSelected bold>
+      Checkbox label
+    </TreeCheckbox>
+  </CheckboxGroup>
+);
+
+export const Primary = () => (
+  <>
+    {renderCheckboxes("primary", 1.4)}
+    {renderCheckboxes("primary", 1.6)}
+    {renderCheckboxes("primary", 1.8)}
+    {renderCheckboxes("primary", 2)}
+  </>
+);
+
+export const Light = () => (
+  <>
+    {renderCheckboxes("light", 1.4)}
+    {renderCheckboxes("light", 1.6)}
+    {renderCheckboxes("light", 1.8)}
+    {renderCheckboxes("light", 2)}
+  </>
+);
+
+export const Error = () => (
+  <>
+    {renderCheckboxes("error", 1.4)}
+    {renderCheckboxes("error", 1.6)}
+    {renderCheckboxes("error", 1.8)}
+    {renderCheckboxes("error", 2)}
+  </>
+);
+
+export const Disabled = () => (
+  <>
+    <CheckboxGroup>
+      <h2>Disabled</h2>
+      <TreeCheckbox slot='selection' variant="primary" size={1.6} isDisabled>
+        Checkbox label
+      </TreeCheckbox>
+      <TreeCheckbox slot='selection' variant="primary" size={1.6} isDisabled defaultSelected>
+        Checkbox label
+      </TreeCheckbox>
+    </CheckboxGroup>
+  </>
+);
\ No newline at end of file
diff --git a/src/components/Tree/TreeCheckbox.tsx b/src/components/Tree/TreeCheckbox.tsx
new file mode 100644
index 000000000..d9d4a7b00
--- /dev/null
+++ b/src/components/Tree/TreeCheckbox.tsx
@@ -0,0 +1,57 @@
+import styled from "styled-components";
+import {
+  Checkbox as RACCheckbox,
+  CheckboxProps as RACCheckboxProps
+} from "react-aria-components";
+import { PropsWithChildren } from "react";
+import { 
+  checkboxLabelStyles,
+  checkboxInputStyles,
+  checkboxSelectionSlotCheckedStyles,
+  CheckboxSize, 
+  CheckboxVariant 
+} from "../Checkbox/sharedCheckboxStyles";
+
+export interface TreeCheckboxProps
+  extends PropsWithChildren<Omit<RACCheckboxProps, "children">> {
+  size?: CheckboxSize;
+  variant?: CheckboxVariant;
+  bold?: boolean;
+}
+
+const StyledCheckbox = styled(RACCheckbox) <{
+  variant: CheckboxVariant;
+  checkboxSize: CheckboxSize;
+  bold: boolean;
+  isDisabled?: boolean;
+}>`
+  ${checkboxLabelStyles}
+
+  [data-slot="selection"] {
+    ${checkboxInputStyles}
+  }
+
+  &[data-selected] [data-slot="selection"]::before {
+    ${checkboxSelectionSlotCheckedStyles}
+  }
+`;
+
+export const TreeCheckbox = ({
+  size = 1.6,
+  variant = "primary",
+  bold = false,
+  children,
+  ...props
+}: TreeCheckboxProps) => {
+  return (
+    <StyledCheckbox
+      {...props}
+      variant={variant}
+      checkboxSize={size}
+      bold={bold}
+    >
+      <div data-slot="selection" />
+      {children}
+    </StyledCheckbox>
+  );
+};
\ No newline at end of file
diff --git a/src/components/__snapshots__/Tree.spec.tsx.snap b/src/components/Tree/__snapshots__/Tree.spec.tsx.snap
similarity index 96%
rename from src/components/__snapshots__/Tree.spec.tsx.snap
rename to src/components/Tree/__snapshots__/Tree.spec.tsx.snap
index 3197bce3b..a33ea7331 100644
--- a/src/components/__snapshots__/Tree.spec.tsx.snap
+++ b/src/components/Tree/__snapshots__/Tree.spec.tsx.snap
@@ -41,10 +41,10 @@ exports[`Tree matches snapshot 1`] = `
         style="display: contents;"
       >
         <label
-          class="sc-jSMfEi ejSDHw"
+          class="sc-jSMfEi fnAjTL"
         >
           <input
-            class="sc-gKXOVf ehzJwZ"
+            class="sc-gKXOVf bROlip"
             slot="check"
             type="checkbox"
             value="one"
diff --git a/src/components/Tree/__snapshots__/TreeCheckbox.spec.tsx.snap b/src/components/Tree/__snapshots__/TreeCheckbox.spec.tsx.snap
new file mode 100644
index 000000000..71d196416
--- /dev/null
+++ b/src/components/Tree/__snapshots__/TreeCheckbox.spec.tsx.snap
@@ -0,0 +1,250 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TreeCheckbox handles disabled state 1`] = `
+<label
+  className="sc-bczRLJ gRqfxl"
+  data-disabled={true}
+  data-rac=""
+  data-react-aria-pressable={true}
+  onClick={[Function]}
+  onDragStart={[Function]}
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchMove={[Function]}
+  onTouchStart={[Function]}
+>
+  <span
+    style={
+      Object {
+        "border": 0,
+        "clip": "rect(0 0 0 0)",
+        "clipPath": "inset(50%)",
+        "height": "1px",
+        "margin": "-1px",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "absolute",
+        "whiteSpace": "nowrap",
+        "width": "1px",
+      }
+    }
+  >
+    <input
+      checked={false}
+      data-react-aria-pressable={true}
+      disabled={true}
+      onBlur={[Function]}
+      onChange={[Function]}
+      onClick={[Function]}
+      onDragStart={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      type="checkbox"
+    />
+  </span>
+  <div
+    data-slot="selection"
+  />
+  Click Me
+</label>
+`;
+
+exports[`TreeCheckbox handles options 1`] = `
+<label
+  className="sc-bczRLJ jaaPJI"
+  data-rac=""
+  data-react-aria-pressable={true}
+  onClick={[Function]}
+  onDragStart={[Function]}
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchMove={[Function]}
+  onTouchStart={[Function]}
+>
+  <span
+    style={
+      Object {
+        "border": 0,
+        "clip": "rect(0 0 0 0)",
+        "clipPath": "inset(50%)",
+        "height": "1px",
+        "margin": "-1px",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "absolute",
+        "whiteSpace": "nowrap",
+        "width": "1px",
+      }
+    }
+  >
+    <input
+      checked={false}
+      data-react-aria-pressable={true}
+      disabled={false}
+      onBlur={[Function]}
+      onChange={[Function]}
+      onClick={[Function]}
+      onDragStart={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      tabIndex={0}
+      type="checkbox"
+    />
+  </span>
+  <div
+    data-slot="selection"
+  />
+  Click Me
+</label>
+`;
+
+exports[`TreeCheckbox matches snapshot 1`] = `
+<label
+  className="sc-bczRLJ brkWAJ"
+  data-rac=""
+  data-react-aria-pressable={true}
+  onClick={[Function]}
+  onDragStart={[Function]}
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchMove={[Function]}
+  onTouchStart={[Function]}
+>
+  <span
+    style={
+      Object {
+        "border": 0,
+        "clip": "rect(0 0 0 0)",
+        "clipPath": "inset(50%)",
+        "height": "1px",
+        "margin": "-1px",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "absolute",
+        "whiteSpace": "nowrap",
+        "width": "1px",
+      }
+    }
+  >
+    <input
+      checked={false}
+      data-react-aria-pressable={true}
+      disabled={false}
+      onBlur={[Function]}
+      onChange={[Function]}
+      onClick={[Function]}
+      onDragStart={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      tabIndex={0}
+      type="checkbox"
+    />
+  </span>
+  <div
+    data-slot="selection"
+  />
+  Click Me
+</label>
+`;
+
+exports[`TreeCheckbox supports slot="selection" 1`] = `
+<label
+  className="sc-bczRLJ brkWAJ"
+  data-rac=""
+  data-react-aria-pressable={true}
+  onClick={[Function]}
+  onDragStart={[Function]}
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchMove={[Function]}
+  onTouchStart={[Function]}
+  slot="selection"
+>
+  <span
+    style={
+      Object {
+        "border": 0,
+        "clip": "rect(0 0 0 0)",
+        "clipPath": "inset(50%)",
+        "height": "1px",
+        "margin": "-1px",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "absolute",
+        "whiteSpace": "nowrap",
+        "width": "1px",
+      }
+    }
+  >
+    <input
+      checked={false}
+      data-react-aria-pressable={true}
+      disabled={false}
+      onBlur={[Function]}
+      onChange={[Function]}
+      onClick={[Function]}
+      onDragStart={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      tabIndex={0}
+      type="checkbox"
+    />
+  </span>
+  <div
+    data-slot="selection"
+  />
+  Click Me
+</label>
+`;
diff --git a/src/components/forms/uncontrolled/inputTypes.tsx b/src/components/forms/uncontrolled/inputTypes.tsx
index 2c2e0e519..3e7ff3e4f 100644
--- a/src/components/forms/uncontrolled/inputTypes.tsx
+++ b/src/components/forms/uncontrolled/inputTypes.tsx
@@ -4,7 +4,7 @@ import { FormInputWrapper, FormLabelText, HelpText, InputProps, RequiredIndicato
 import { AbstractFormData } from "../controlled/hooks";
 import { partitionSequence } from "@openstax/ts-utils/misc/partitionSequence";
 import { Radio as StyledRadio } from "../../Radio";
-import { Checkbox as StyledCheckbox } from "../../Checkbox"
+import { Checkbox as StyledCheckbox } from "../../Checkbox/Checkbox"
 
 /*
  * input element
diff --git a/src/index.ts b/src/index.ts
index 673f391a9..928559b4c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,7 +3,8 @@ export * from './components/BodyPortalSlotsContext';
 export * from './components/Button';
 export * from './components/ButtonBar';
 export * from './components/ButtonNav';
-export * from './components/Checkbox';
+export * from './components/Checkbox/Checkbox';
+export * from './components/Tree/TreeCheckbox';
 export * from './components/DropdownMenu';
 export * from './components/Error';
 export * from './components/ErrorBoundary';
@@ -27,7 +28,7 @@ export * from './components/Text';
 export * from './components/ToastContainer';
 export * from './components/ToggleButtonGroup';
 export * from './components/Tooltip';
-export * from './components/Tree';
+export * from './components/Tree/Tree';
 export * as Forms from './components/forms';
 export * from './constants';
 export * from './contexts';