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 1/2] 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' },
+  ]}
+/>`;

From 0bea7650c902b0b2d88413ab1e7a8f0477b78fa9 Mon Sep 17 00:00:00 2001
From: Vivek Hipparkar <vivekhipparkar@gmail.com>
Date: Thu, 18 Dec 2025 19:47:46 +0530
Subject: [PATCH 2/2] docs: format Select docs with Prettier

Signed-off-by: Vivek Hipparkar <vivekhipparkar@gmail.com>
---
 docs-ui/src/content/select.mdx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/docs-ui/src/content/select.mdx b/docs-ui/src/content/select.mdx
index 45aa9d1f26..757a79effe 100644
--- a/docs-ui/src/content/select.mdx
+++ b/docs-ui/src/content/select.mdx
@@ -104,7 +104,6 @@ You can disable specific options within the Select component using `disabledKeys
   code={selectDisabledOptionsSnippet}
 />
 
-
 ### Searchable
 
 Here's a view when the select has searchable filtering.
@@ -141,7 +140,6 @@ Here's a view when the select combines search and multiple selection.
   code={selectSearchableMultipleSnippet}
 />
 
-
 ### Responsive
 
 Here's a view when the select is responsive.
@@ -151,4 +149,3 @@ Here's a view when the select is responsive.
 <Theming definition={SelectDefinition} />
 
 <ChangelogComponent component="select" />
-