diff --git a/packages/clay-form/docs/duallistbox.js b/packages/clay-form/docs/duallistbox.js
index 4ec02153cf..cece632b92 100644
--- a/packages/clay-form/docs/duallistbox.js
+++ b/packages/clay-form/docs/duallistbox.js
@@ -12,47 +12,51 @@ import classNames from 'classnames';
 `;
 
 const dualListBoxCode = `const Component = () => {
-    const moveBoxesOptions = [
-        [
-            {
-                label: 'Discord',
-                value: 'discord',
-            },
-            {
-                label: 'Evernote',
-                value: 'evernote',
-            },
-            {
-                label: 'Facebook',
-                value: 'facebook',
-            },
-            {
-                label: 'LinkedIn',
-                value: 'linkedin',
-            },
-        ],
-        [
-            {
-                label: 'Reddit',
-                value: 'reddit',
-            },
-            {
-                label: 'Slack',
-                value: 'slack',
-            },
-            {
-                label: 'Twitter',
-                value: 'twitter',
-            },
-        ],
-    ];
+	const moveBoxesOptions = [
+		[
+			{
+				label: 'Discord',
+				value: 'discord',
+			},
+			{
+				label: 'Evernote',
+				value: 'evernote',
+			},
+			{
+				label: 'Facebook',
+				value: 'facebook',
+			},
+			{
+				label: 'LinkedIn',
+				value: 'linkedin',
+			},
+		],
+		[
+			{
+				label: 'Reddit',
+				value: 'reddit',
+			},
+			{
+				label: 'Slack',
+				value: 'slack',
+			},
+			{
+				label: 'Twitter',
+				value: 'twitter',
+			},
+		],
+	];
 
 	const [items, setItems] = useState(moveBoxesOptions);
 	const [leftSelected, setLeftSelected] = useState([]);
 	const [rightSelected, setRightSelected] = useState([]);
 
+	const [firstSelectBoxItems, secondSelectBoxItems] = items;
+
 	return (
 		<ClayDualListBox
+			disableLTR={firstSelectBoxItems.length === 0}
+			disableRTL={secondSelectBoxItems.length === 0}
 			items={items}
 			left={{
 				label: 'In Use',