From f7d8c02a8b2616a39ee275c6d3d95fa2c1abe4b1 Mon Sep 17 00:00:00 2001
From: Vivek Hipparkar <vivekhipparkar@gmail.com>
Date: Thu, 18 Dec 2025 17:22:38 +0530
Subject: [PATCH] docs: add example for disabling individual Select options

Signed-off-by: Vivek Hipparkar <vivekhipparkar@gmail.com>
---
 docs-ui/src/content/select.mdx      | 16 ++++++++++++++++
 docs-ui/src/content/select.props.ts | 13 +++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/docs-ui/src/content/select.mdx b/docs-ui/src/content/select.mdx
index 436129d749..45aa9d1f26 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,19 @@ 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.
@@ -127,6 +141,7 @@ Here's a view when the select combines search and multiple selection.
   code={selectSearchableMultipleSnippet}
 />
 
+
 ### Responsive
 
 Here's a view when the select is responsive.
@@ -136,3 +151,4 @@ Here's a view when the select is responsive.
 <Theming definition={SelectDefinition} />
 
 <ChangelogComponent component="select" />
+
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' },
+  ]}
+/>`;