diff --git a/docs-ui/src/content/select.mdx b/docs-ui/src/content/select.mdx
index 436129d749..757a79effe 100644
--- a/docs-ui/src/content/select.mdx
+++ b/docs-ui/src/content/select.mdx
@@ -14,6 +14,7 @@ import {
   selectSearchableSnippet,
   selectMultipleSnippet,
   selectSearchableMultipleSnippet,
+  selectDisabledOptionsSnippet,
 } from './select.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
@@ -91,6 +92,18 @@ Here's a view when the select is disabled.
   code={selectDisabledSnippet}
 />
 
+### Disabled options
+
+You can disable specific options within the Select component using `disabledKeys`.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<SelectSnippet story="DisabledOption" />}
+  code={selectDisabledOptionsSnippet}
+/>
+
 ### Searchable
 
 Here's a view when the select has searchable filtering.
diff --git a/docs-ui/src/content/select.props.ts b/docs-ui/src/content/select.props.ts
index 05f0d895c9..5c5dfb7fc8 100644
--- a/docs-ui/src/content/select.props.ts
+++ b/docs-ui/src/content/select.props.ts
@@ -209,3 +209,16 @@ export const selectSearchableMultipleSnippet = `<Select
     // ... more options
   ]}
 />`;
+
+export const selectDisabledOptionsSnippet = `<Select
+  name="font"
+  label="Font Family"
+  placeholder="Select a font"
+  disabledKeys={['cursive', 'serif']}
+  options={[
+    { value: 'sans', label: 'Sans-serif' },
+    { value: 'serif', label: 'Serif' },
+    { value: 'mono', label: 'Monospace' },
+    { value: 'cursive', label: 'Cursive' },
+  ]}
+/>`;