diff --git a/.changeset/checkbox-accessibility-docs.md b/.changeset/checkbox-accessibility-docs.md
new file mode 100644
index 000000000..849b7d590
--- /dev/null
+++ b/.changeset/checkbox-accessibility-docs.md
@@ -0,0 +1,5 @@
+---
+"@radui/ui": patch
+---
+
+Add Checkbox keyboard interaction and ARIA reference tables to the docs.
diff --git a/docs/app/docs/components/checkbox/content.mdx b/docs/app/docs/components/checkbox/content.mdx
index 17742e2bf..873d7a7ee 100644
--- a/docs/app/docs/components/checkbox/content.mdx
+++ b/docs/app/docs/components/checkbox/content.mdx
@@ -1,6 +1,6 @@
import Documentation from '@/components/layout/Documentation/Documentation';
import CheckboxExample from "./docs/example_1"
-import { code, anatomy, api_documentation } from "./docs/codeUsage"
+import { code, anatomy, ariaReferences, keyboardShortcuts, api_documentation } from "./docs/codeUsage"
+
+
+
+
diff --git a/docs/app/docs/components/checkbox/docs/codeUsage.js b/docs/app/docs/components/checkbox/docs/codeUsage.js
index ea09e0dd7..556ac7672 100644
--- a/docs/app/docs/components/checkbox/docs/codeUsage.js
+++ b/docs/app/docs/components/checkbox/docs/codeUsage.js
@@ -1,6 +1,16 @@
import { getSourceCodeFromPath } from '@/utils/parseSourceCode';
import root_api from './component_api/root.tsx';
import indicator_api from './component_api/indicator.tsx';
+import {
+ createAriaReferenceRow,
+ createAriaReferenceTable,
+ DOCS_ARIA_PATTERNS
+} from '../../shared/ariaReferences';
+import {
+ createKeyboardShortcutRow,
+ createKeyboardShortcutTable,
+ DOCS_KEYBOARD_SHORTCUTS
+} from '../../shared/keyboardShortcuts';
const example_1_SourceCode = await getSourceCodeFromPath('docs/app/docs/components/checkbox/docs/example_1.tsx');
const scss_SourceCode = await getSourceCodeFromPath('styles/themes/components/checkbox.scss');
@@ -18,4 +28,22 @@ export const api_documentation = {
indicator: indicator_api
};
+export const keyboardShortcuts = createKeyboardShortcutTable([
+ createKeyboardShortcutRow(
+ DOCS_KEYBOARD_SHORTCUTS.TAB,
+ 'Moves focus to the checkbox.'
+ ),
+ createKeyboardShortcutRow(
+ DOCS_KEYBOARD_SHORTCUTS.SPACE,
+ 'Toggles between checked and unchecked states.'
+ )
+]);
+
+export const ariaReferences = createAriaReferenceTable([
+ createAriaReferenceRow(
+ DOCS_ARIA_PATTERNS.CHECKBOX,
+ 'Uses checkbox semantics with aria-checked to expose checked, unchecked, or mixed state.'
+ )
+]);
+
export default code;
diff --git a/docs/app/docs/components/shared/ariaReferences.js b/docs/app/docs/components/shared/ariaReferences.js
index b37edd768..cc48c0fcb 100644
--- a/docs/app/docs/components/shared/ariaReferences.js
+++ b/docs/app/docs/components/shared/ariaReferences.js
@@ -22,6 +22,11 @@ export const DOCS_ARIA_PATTERNS = Object.freeze({
label: 'Alert dialog pattern',
href: 'https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/'
},
+ CHECKBOX: {
+ id: 'checkbox',
+ label: 'Checkbox pattern',
+ href: 'https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/'
+ },
COMBOBOX: {
id: 'combobox',
label: 'Combobox pattern',