diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index b206309f45f..abc912ed04f 100644
--- a/packages/carbon-web-components/.storybook/main.ts
+++ b/packages/carbon-web-components/.storybook/main.ts
@@ -30,6 +30,10 @@ const stories = glob.sync(
     '../src/**/progress-bar.stories.ts',
     '../src/**/progress-indicator.mdx',
     '../src/**/progress-indicator.stories.ts',
+    '../src/**/search.mdx',
+    '../src/**/search.stories.ts',
+    '../src/**/select.mdx',
+    '../src/**/select.stories.ts',
     '../src/**/skeleton-placeholder.mdx',
     '../src/**/skeleton-placeholder.stories.ts',
     '../src/**/skeleton-text.mdx',
diff --git a/packages/carbon-web-components/src/components/search/search-story.ts b/packages/carbon-web-components/src/components/search/search-story.ts
deleted file mode 100644
index ecaf42a43a4..00000000000
--- a/packages/carbon-web-components/src/components/search/search-story.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { boolean, number, select } from '@storybook/addon-knobs';
-import textNullable from '../../../.storybook/knob-text-nullable';
-import { INPUT_SIZE } from '../text-input/text-input';
-import './search-skeleton';
-import storyDocs from './search-story.mdx';
-import { prefix } from '../../globals/settings';
-import '../layer';
-import '../../../.storybook/templates/with-layer';
-
-const sizes = {
-  [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
-  [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,
-  [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,
-};
-
-const widthSliderOptions = {
-  range: true,
-  min: 300,
-  max: 800,
-  step: 50,
-};
-
-export const Default = () => {
-  return html`
-    <cds-search
-      size="lg"
-      close-button-label-text="Clear search input"
-      label-text="Search"
-      placeholder="Find your items"
-      type="text"></cds-search>
-  `;
-};
-
-export const Disabled = () => {
-  return html`
-    <cds-search
-      size="lg"
-      disabled
-      close-button-label-text="Clear search input"
-      label-text="Search"
-      placeholder="Find your items"
-      type="text"></cds-search>
-  `;
-};
-
-export const Expandable = () => {
-  return html`
-    <cds-search
-      size="lg"
-      expandable
-      close-button-assistive-text="Clear search input"
-      label-text="Search"
-      placeholder="Find your items"
-      type="text"></cds-search>
-  `;
-};
-
-export const ExpandableWithLayer = () => {
-  return html`
-    <sb-template-layers>
-      <cds-search size="lg" expandable placeholder="Layer two"></cds-search>
-    </sb-template-layers>
-  `;
-};
-
-export const WithLayer = () => {
-  return html`
-    <sb-template-layers>
-      <cds-search size="lg" placeholder="Find your items"></cds-search>
-    </sb-template-layers>
-  `;
-};
-
-export const Playground = (args) => {
-  const {
-    autoComplete,
-    closeButtonLabelText,
-    colorScheme,
-    disabled,
-    labelText,
-    placeholder,
-    playgroundWidth,
-    size,
-    role,
-    type,
-    value,
-    onInput,
-  } = args?.[`${prefix}-search`] ?? {};
-
-  const mainDiv = document.querySelector('#main-content');
-
-  if (mainDiv) {
-    (mainDiv as HTMLElement).style.width = `${playgroundWidth}px`;
-  }
-
-  return html`
-    <cds-search
-      autocomplete="${autoComplete}"
-      close-button-assistive-text="${ifDefined(closeButtonLabelText)}"
-      color-scheme="${ifDefined(colorScheme)}"
-      ?disabled="${disabled}"
-      label-text="${ifDefined(labelText)}"
-      placeholder="${ifDefined(placeholder)}"
-      size="${ifDefined(size)}"
-      type="${ifDefined(type)}"
-      role=${role}
-      value="${ifDefined(value)}"
-      @cds-search-input="${onInput}">
-    </cds-search>
-  `;
-};
-
-Playground.parameters = {
-  knobs: {
-    [`${prefix}-search`]: () => ({
-      autoComplete: textNullable('Autocomplete (autocomplete)', 'off'),
-      closeButtonLabelText: textNullable(
-        'The label text for the close button (close-button-label-text)',
-        'Clear search input'
-      ),
-      disabled: boolean('Disabled (disabled)', false),
-      labelText: textNullable('Label text (label-text)', 'Search'),
-      placeholder: textNullable(
-        'Placeholder text (placeholder)',
-        'Placeholder text'
-      ),
-      playgroundWidth: number('Playground width', 300, widthSliderOptions),
-      role: textNullable('The role of the <input> (role)', 'searchbox'),
-      size: select('Search size (size)', sizes, null),
-      type: textNullable('The type of the <input> (type)', 'text'),
-      value: textNullable('Value (value)', 'Default value'),
-    }),
-  },
-};
-
-export default {
-  title: 'Components/Search',
-  parameters: {
-    ...storyDocs.parameters,
-  },
-};
diff --git a/packages/carbon-web-components/src/components/search/search-story.mdx b/packages/carbon-web-components/src/components/search/search.mdx
similarity index 83%
rename from packages/carbon-web-components/src/components/search/search-story.mdx
rename to packages/carbon-web-components/src/components/search/search.mdx
index 7677aad5c2e..86f1aa8c1d4 100644
--- a/packages/carbon-web-components/src/components/search/search-story.mdx
+++ b/packages/carbon-web-components/src/components/search/search.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as SearchStories from './search.stories';
+
+<Meta of={SearchStories} />
 
 # Search
 
@@ -24,8 +27,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/search/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['search'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['search'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -47,4 +50,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-search light>`) and `false` means not setting the attribute (e.g.
 `<cds-search>` without `light` attribute).
 
-<Props of="cds-search" />
+<ArgsTable of="cds-search" />
diff --git a/packages/carbon-web-components/src/components/search/search.stories.ts b/packages/carbon-web-components/src/components/search/search.stories.ts
new file mode 100644
index 00000000000..446e5c9ef92
--- /dev/null
+++ b/packages/carbon-web-components/src/components/search/search.stories.ts
@@ -0,0 +1,201 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { INPUT_SIZE } from '../text-input/text-input';
+import './search-skeleton';
+import storyDocs from './search.mdx';
+import '../layer';
+import '../../../.storybook/templates/with-layer';
+import './index';
+
+const sizes = {
+  [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
+  [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,
+  [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,
+};
+
+const args = {
+  autoComplete: 'off',
+  closeButtonLabelText: 'Clear search input',
+  disabled: false,
+  labelText: 'Search',
+  placeholder: 'Placeholder text',
+  playgroundWidth: 300,
+  role: 'searchbox',
+  size: null,
+  type: 'text',
+  value: 'Default value',
+};
+
+const argTypes = {
+  autoComplete: {
+    control: 'text',
+    description:
+      'Specify an optional value for the <code>autocomplete</code> property on the underlying <code>&lt;input&gt;</code>, defaults to "off".',
+  },
+  closeButtonLabelText: {
+    control: 'text',
+    description:
+      'Specify a label to be read by screen readers on the "close" button.',
+  },
+  disabled: {
+    control: 'boolean',
+    description:
+      'Specify whether the <code>&lt;input&gt;</code> should be disabled.',
+  },
+  labelText: {
+    control: 'text',
+    description: 'Provide the label text for the Search icon.',
+  },
+  placeholder: {
+    control: 'text',
+    description:
+      'Provide an optional placeholder text for the Search. Note: if the label and placeholder differ, VoiceOver on Mac will read both.',
+  },
+  playgroundWidth: {
+    control: { type: 'range', min: 300, max: 800, step: 50 },
+    description: 'Playground width',
+  },
+  role: {
+    control: 'text',
+    description:
+      'Specify the role for the underlying <code>&lt;input&gt;</code>, defaults to <code>searchbox</code>.',
+  },
+  size: {
+    control: 'select',
+    description: 'Specify the size of the Search.',
+    options: sizes,
+  },
+  type: {
+    control: 'text',
+    description:
+      'Optional prop to specify the type of the <code>&lt;input&gt;</code>.',
+  },
+  value: {
+    control: 'text',
+    description: 'Specify the value of the <code>&lt;input&gt;</code>.',
+  },
+};
+
+export const Default = {
+  render: () => {
+    return html`
+      <cds-search
+        size="lg"
+        close-button-label-text="Clear search input"
+        label-text="Search"
+        placeholder="Find your items"
+        type="text"></cds-search>
+    `;
+  },
+};
+
+export const Disabled = {
+  render: () => {
+    return html`
+      <cds-search
+        size="lg"
+        disabled
+        close-button-label-text="Clear search input"
+        label-text="Search"
+        placeholder="Find your items"
+        type="text"></cds-search>
+    `;
+  },
+};
+
+export const Expandable = {
+  render: () => {
+    return html`
+      <cds-search
+        size="lg"
+        expandable
+        close-button-assistive-text="Clear search input"
+        label-text="Search"
+        placeholder="Find your items"
+        type="text"></cds-search>
+    `;
+  },
+};
+
+export const ExpandableWithLayer = {
+  render: () => {
+    return html`
+      <sb-template-layers>
+        <cds-search size="lg" expandable placeholder="Layer two"></cds-search>
+      </sb-template-layers>
+    `;
+  },
+};
+
+export const WithLayer = {
+  render: () => {
+    return html`
+      <sb-template-layers>
+        <cds-search size="lg" placeholder="Find your items"></cds-search>
+      </sb-template-layers>
+    `;
+  },
+};
+
+export const Playground = {
+  args,
+  argTypes,
+  render: (args) => {
+    const {
+      autoComplete,
+      closeButtonLabelText,
+      colorScheme,
+      disabled,
+      labelText,
+      placeholder,
+      playgroundWidth,
+      size,
+      role,
+      type,
+      value,
+      onInput,
+    } = args ?? {};
+
+    const mainDiv = document.querySelector('#main-content');
+
+    if (mainDiv) {
+      (mainDiv as HTMLElement).style.width = `${playgroundWidth}px`;
+    }
+
+    return html`
+      <cds-search
+        autocomplete="${autoComplete}"
+        close-button-assistive-text="${ifDefined(closeButtonLabelText)}"
+        color-scheme="${ifDefined(colorScheme)}"
+        ?disabled="${disabled}"
+        label-text="${ifDefined(labelText)}"
+        placeholder="${ifDefined(placeholder)}"
+        size="${ifDefined(size)}"
+        type="${ifDefined(type)}"
+        role=${role}
+        value="${ifDefined(value)}"
+        @cds-search-input="${onInput}">
+      </cds-search>
+    `;
+  },
+};
+
+const meta = {
+  title: 'Components/Search',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
+};
+
+export default meta;
diff --git a/packages/carbon-web-components/src/components/select/select-story.ts b/packages/carbon-web-components/src/components/select/select-story.ts
deleted file mode 100644
index 8e55c291409..00000000000
--- a/packages/carbon-web-components/src/components/select/select-story.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
-import textNullable from '../../../.storybook/knob-text-nullable';
-// Below path will be there when an application installs `carbon-web-components` package.
-// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
-// @ts-ignore
-import { prefix } from '../../globals/settings';
-import { INPUT_SIZE } from '../text-input/text-input';
-import './select';
-import './select-item-group';
-import './select-item';
-import './select-skeleton';
-import '../form/form-item';
-import '../layer';
-import '../../../.storybook/templates/with-layer';
-
-import storyDocs from './select-story.mdx';
-
-const sizes = {
-  [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
-  [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,
-  [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,
-};
-
-export const Default = () => {
-  return html`
-    <cds-form-item>
-      <cds-select
-        helper-text="Optional helper text"
-        label-text="Select an option"
-        placeholder="Choose an option">
-        <cds-select-item-group label="Category 1">
-          <cds-select-item value="all">Option 1</cds-select-item>
-          <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
-        </cds-select-item-group>
-        <cds-select-item-group label="Category 2">
-          <cds-select-item value="staging">Option 3</cds-select-item>
-          <cds-select-item value="dea">Option 4</cds-select-item>
-          <cds-select-item value="router">Option 5</cds-select-item>
-        </cds-select-item-group>
-      </cds-select>
-    </cds-form-item>
-  `;
-};
-
-export const Inline = () => {
-  return html`
-    <cds-form-item>
-      <cds-select
-        inline
-        helper-text="Optional helper text"
-        label-text="Select an option"
-        placeholder="Choose an option">
-        <cds-select-item-group label="Category 1">
-          <cds-select-item value="all">Option 1</cds-select-item>
-          <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
-        </cds-select-item-group>
-        <cds-select-item-group label="Category 2">
-          <cds-select-item value="staging">Option 3</cds-select-item>
-          <cds-select-item value="dea">Option 4</cds-select-item>
-          <cds-select-item value="router">Option 5</cds-select-item>
-        </cds-select-item-group>
-      </cds-select>
-    </cds-form-item>
-  `;
-};
-
-export const skeleton = () =>
-  html` <cds-select-skeleton></cds-select-skeleton> `;
-
-skeleton.parameters = {
-  percy: {
-    skip: true,
-  },
-};
-
-export const WithLayer = () => {
-  return html`
-    <sb-template-layers>
-      <cds-select
-        helper-text="Optional helper text"
-        placeholder="Choose an option">
-        <cds-select-item-group label="Category 1">
-          <cds-select-item value="all">Option 1</cds-select-item>
-          <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
-        </cds-select-item-group>
-        <cds-select-item-group label="Category 2">
-          <cds-select-item value="staging">Option 3</cds-select-item>
-          <cds-select-item value="dea">Option 4</cds-select-item>
-          <cds-select-item value="router">Option 5</cds-select-item>
-        </cds-select-item-group>
-      </cds-select>
-    </sb-template-layers>
-  `;
-};
-
-export const Playground = (args) => {
-  const {
-    disabled,
-    helperText,
-    hideLabel,
-    inline,
-    invalid,
-    invalidText,
-    labelText,
-    name,
-    placeholder,
-    size,
-    readonly,
-    warn,
-    warnText,
-    value,
-    children = html`
-      <cds-select-item-group label="Category 1">
-        <cds-select-item value="all">Option 1</cds-select-item>
-        <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
-      </cds-select-item-group>
-      <cds-select-item-group label="Category 2">
-        <cds-select-item value="staging">Option 3</cds-select-item>
-        <cds-select-item value="dea">Option 4</cds-select-item>
-        <cds-select-item value="router">Option 5</cds-select-item>
-      </cds-select-item-group>
-    `,
-    onInput,
-  } = args?.[`${prefix}-select`] ?? {};
-  return html`
-    <cds-form-item>
-      <cds-select
-        ?inline="${inline}"
-        ?disabled="${disabled}"
-        helper-text="${ifDefined(helperText)}"
-        ?hide-label="${hideLabel}"
-        ?invalid="${invalid}"
-        invalid-text="${ifDefined(invalidText)}"
-        label-text="${ifDefined(labelText)}"
-        name="${ifDefined(name)}"
-        placeholder="${ifDefined(placeholder)}"
-        size="${ifDefined(size)}"
-        ?readonly="${readonly}"
-        ?warn="${warn}"
-        warn-text="${ifDefined(warnText)}"
-        value="${ifDefined(value)}"
-        @cds-select-selected="${ifDefined(onInput)}">
-        ${children}
-      </cds-select>
-    </cds-form-item>
-  `;
-};
-
-Playground.parameters = {
-  knobs: {
-    [`${prefix}-select`]: () => ({
-      disabled: boolean('Disabled (disabled)', false),
-      helperText: textNullable(
-        'Helper text (helper-text)',
-        'Optional helper text'
-      ),
-      hideLabel: boolean('Hide label (hide-label)', false),
-      inline: boolean('Inline (inline)', false),
-      invalid: boolean('Invalid (invalid)', false),
-      invalidText: textNullable('Invalid text (invalid-text)', 'Error message'),
-      labelText: textNullable('Label text (label-text)', 'Select an option'),
-      placeholder: textNullable(
-        'Placeholder (placeholder)',
-        'Choose an option'
-      ),
-      size: select('size (size)', sizes, INPUT_SIZE.MEDIUM),
-      readonly: boolean('Read only (readonly)', false),
-      warn: boolean('Warn (warn)', false),
-      warnText: textNullable('Warn text (warn-text)', 'Warning message'),
-      value: textNullable('The value of the selected item (value)', ''),
-      onInput: action(`${prefix}-select-selected`),
-    }),
-  },
-};
-
-export default {
-  title: 'Components/Select',
-  parameters: {
-    ...storyDocs.parameters,
-  },
-  decorators: [
-    (story) => {
-      return html`<div style="width: 400px">${story()}</div>`;
-    },
-  ],
-};
diff --git a/packages/carbon-web-components/src/components/select/select-story.mdx b/packages/carbon-web-components/src/components/select/select.mdx
similarity index 86%
rename from packages/carbon-web-components/src/components/select/select-story.mdx
rename to packages/carbon-web-components/src/components/select/select.mdx
index 6f0176d0686..cd2445809e2 100644
--- a/packages/carbon-web-components/src/components/select/select-story.mdx
+++ b/packages/carbon-web-components/src/components/select/select.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as SelectStories from './select.stories';
+
+<Meta of={SelectStories} />
 
 # Select
 
@@ -22,8 +25,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/select/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['select'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['select'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -50,7 +53,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-select autofocus>`) and `false` means not setting the attribute (e.g.
 `<cds-select>` without `autofocus` attribute).
 
-<Props of="cds-select" />
+<ArgsTable of="cds-select" />
 
 ## `<cds-select-item-group>` attributes, properties and events
 
@@ -58,7 +61,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-select-item-group disabled>`) and `false` means not setting the attribute
 (e.g. `<cds-select-item-group>` without `disabled` attribute).
 
-<Props of="cds-select-item-group" />
+<ArgsTable of="cds-select-item-group" />
 
 ## `<cds-select-item>` attributes, properties and events
 
@@ -66,4 +69,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-select-item disabled>`) and `false` means not setting the attribute (e.g.
 `<cds-select-item>` without `disabled` attribute).
 
-<Props of="cds-select-item" />
+<ArgsTable of="cds-select-item" />
diff --git a/packages/carbon-web-components/src/components/select/select.stories.ts b/packages/carbon-web-components/src/components/select/select.stories.ts
new file mode 100644
index 00000000000..4f4ecf78730
--- /dev/null
+++ b/packages/carbon-web-components/src/components/select/select.stories.ts
@@ -0,0 +1,258 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+// Below path will be there when an application installs `carbon-web-components` package.
+// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
+// @ts-ignore
+import { prefix } from '../../globals/settings';
+import { INPUT_SIZE } from '../text-input/text-input';
+import './index';
+import '../form/form-item';
+import '../layer';
+import '../../../.storybook/templates/with-layer';
+
+import storyDocs from './select.mdx';
+
+const sizes = {
+  [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
+  [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,
+  [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,
+};
+
+const args = {
+  disabled: false,
+  helperText: 'Optional helper text',
+  hideLabel: false,
+  inline: false,
+  invalid: false,
+  invalidText: 'Error message',
+  labelText: 'Select an option',
+  placeholder: 'Choose an option',
+  size: INPUT_SIZE.MEDIUM,
+  readOnly: false,
+  warn: false,
+  warnText: 'Warning message',
+  value: '',
+};
+
+const argTypes = {
+  disabled: {
+    control: 'boolean',
+    description: 'Specify whether the control is disabled.',
+  },
+  helperText: {
+    control: 'text',
+    description:
+      'Provide text that is used alongside the control label for additional help.',
+  },
+  hideLabel: {
+    control: 'boolean',
+    description: 'Specify whether the label should be hidden, or not.',
+  },
+  inline: {
+    control: 'boolean',
+    description: 'Specify whether you want the inline version of this control.',
+  },
+  invalid: {
+    control: 'boolean',
+    description: 'Specify if the currently value is invalid.',
+  },
+  invalidText: {
+    control: 'text',
+    description: 'Message which is displayed if the value is invalid.',
+  },
+  labelText: {
+    control: 'text',
+    description:
+      'Provide label text to be read by screen readers when interacting with the control.',
+  },
+  placeholder: {
+    control: 'text',
+    description:
+      'Placeholder text to be used with the <code>&lt;input&gt;</code>.',
+  },
+  size: {
+    control: 'select',
+    description: 'Specify the size of the Select Input.',
+    options: sizes,
+  },
+  readOnly: {
+    control: 'boolean',
+    description: 'Whether the select should be read-only.',
+  },
+  warn: {
+    control: 'boolean',
+    description: 'Specify whether the control is currently in warning state.',
+  },
+  warnText: {
+    control: 'text',
+    description:
+      'Provide the text that is displayed when the control is in warning state.',
+  },
+  value: {
+    control: 'text',
+    description: 'The value of the selected item.',
+  },
+  onInput: {
+    action: `${prefix}-select-selected`,
+  },
+};
+
+export const Default = {
+  render: () => {
+    return html`
+      <cds-form-item>
+        <cds-select
+          helper-text="Optional helper text"
+          label-text="Select an option"
+          placeholder="Choose an option">
+          <cds-select-item-group label="Category 1">
+            <cds-select-item value="all">Option 1</cds-select-item>
+            <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
+          </cds-select-item-group>
+          <cds-select-item-group label="Category 2">
+            <cds-select-item value="staging">Option 3</cds-select-item>
+            <cds-select-item value="dea">Option 4</cds-select-item>
+            <cds-select-item value="router">Option 5</cds-select-item>
+          </cds-select-item-group>
+        </cds-select>
+      </cds-form-item>
+    `;
+  },
+};
+
+export const Inline = {
+  render: () => {
+    return html`
+      <cds-form-item>
+        <cds-select
+          inline
+          helper-text="Optional helper text"
+          label-text="Select an option"
+          placeholder="Choose an option">
+          <cds-select-item-group label="Category 1">
+            <cds-select-item value="all">Option 1</cds-select-item>
+            <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
+          </cds-select-item-group>
+          <cds-select-item-group label="Category 2">
+            <cds-select-item value="staging">Option 3</cds-select-item>
+            <cds-select-item value="dea">Option 4</cds-select-item>
+            <cds-select-item value="router">Option 5</cds-select-item>
+          </cds-select-item-group>
+        </cds-select>
+      </cds-form-item>
+    `;
+  },
+};
+
+export const Skeleton = {
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: () => html` <cds-select-skeleton></cds-select-skeleton> `,
+};
+
+export const WithLayer = {
+  render: () => {
+    return html`
+      <sb-template-layers>
+        <cds-select
+          helper-text="Optional helper text"
+          placeholder="Choose an option">
+          <cds-select-item-group label="Category 1">
+            <cds-select-item value="all">Option 1</cds-select-item>
+            <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
+          </cds-select-item-group>
+          <cds-select-item-group label="Category 2">
+            <cds-select-item value="staging">Option 3</cds-select-item>
+            <cds-select-item value="dea">Option 4</cds-select-item>
+            <cds-select-item value="router">Option 5</cds-select-item>
+          </cds-select-item-group>
+        </cds-select>
+      </sb-template-layers>
+    `;
+  },
+};
+
+export const Playground = {
+  args,
+  argTypes,
+  render: (args) => {
+    const {
+      disabled,
+      helperText,
+      hideLabel,
+      inline,
+      invalid,
+      invalidText,
+      labelText,
+      name,
+      placeholder,
+      size,
+      readOnly,
+      warn,
+      warnText,
+      value,
+      children = html`
+        <cds-select-item-group label="Category 1">
+          <cds-select-item value="all">Option 1</cds-select-item>
+          <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
+        </cds-select-item-group>
+        <cds-select-item-group label="Category 2">
+          <cds-select-item value="staging">Option 3</cds-select-item>
+          <cds-select-item value="dea">Option 4</cds-select-item>
+          <cds-select-item value="router">Option 5</cds-select-item>
+        </cds-select-item-group>
+      `,
+      onInput,
+    } = args ?? {};
+    return html`
+      <cds-form-item>
+        <cds-select
+          ?inline="${inline}"
+          ?disabled="${disabled}"
+          helper-text="${ifDefined(helperText)}"
+          ?hide-label="${hideLabel}"
+          ?invalid="${invalid}"
+          invalid-text="${ifDefined(invalidText)}"
+          label-text="${ifDefined(labelText)}"
+          name="${ifDefined(name)}"
+          placeholder="${ifDefined(placeholder)}"
+          size="${ifDefined(size)}"
+          ?readonly="${readOnly}"
+          ?warn="${warn}"
+          warn-text="${ifDefined(warnText)}"
+          value="${ifDefined(value)}"
+          @cds-select-selected="${ifDefined(onInput)}">
+          ${children}
+        </cds-select>
+      </cds-form-item>
+    `;
+  },
+};
+
+const meta = {
+  decorators: [
+    (story) => {
+      return html`<div style="width: 400px">${story()}</div>`;
+    },
+  ],
+  title: 'Components/Select',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
+};
+
+export default meta;
diff --git a/packages/carbon-web-components/src/components/select/select.ts b/packages/carbon-web-components/src/components/select/select.ts
index 3bc40ee58cd..a21f1d03648 100644
--- a/packages/carbon-web-components/src/components/select/select.ts
+++ b/packages/carbon-web-components/src/components/select/select.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -295,7 +295,7 @@ class CDSSelect extends FormMixin(LitElement) {
    */
   @property({ type: Number })
   get selectedIndex() {
-    return this._selectNode.selectedIndex;
+    return this._selectNode?.selectedIndex;
   }
 
   set selectedIndex(value) {