From bd8c0de7b96345ef1b45d1ca26183637ff080844 Mon Sep 17 00:00:00 2001
From: Ilia <ilia@appsmith.com>
Date: Mon, 2 Sep 2024 12:30:23 +0200
Subject: [PATCH] feat: add select widget (#35849)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description


https://github.com/user-attachments/assets/7516bcd8-7746-485a-a49d-bd19b22833d0




Fixes #35824

> [!WARNING]
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.All"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10663955895>
> Commit: 58d40f7826f125778734f5fda93499e3b78dfcfa
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10663955895&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Mon, 02 Sep 2024 10:15:26 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Introduced the `WDSSelectWidget`, enhancing widget options within the
application.
- Added configuration files to support autocomplete, validation, and
property management for the new select widget.
- Added new icons and thumbnails for input fields, improving UI
component availability.

- **Improvements**
  - Streamlined the `Select` component for better usability and clarity.
- Enhanced type definitions for better type safety and clarity in widget
configuration.
- Improved SVG structures for icons and thumbnails, enhancing visual
representation.
- Adjusted styles for the `Select` component, ensuring consistent sizing
and improved icon alignment.

- **Documentation**
- Added central export for configuration modules, simplifying access to
widget settings.
- Updated stories to include new icons and thumbnails, enriching
documentation resources.

- **Bug Fixes**
- Improved validation logic for default options and custom options to
ensure data integrity.

- **Chores**
- Reorganized import statements for better readability and
maintainability across widget files.
  - Updated TypeScript configuration for improved module handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: vadim <vadim@appsmith.com>
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
---
 .../src/components/Select/src/Select.tsx      |  22 +-
 .../src/components/Select/src/index.ts        |   1 +
 .../components/Select/src/styles.module.css   |   7 +-
 .../src/components/Select/src/types.ts        |   6 +-
 .../propertyControls/KeyValueComponent.tsx    |   2 +
 .../constants/PropertyControlConstants.tsx    |  14 +-
 .../entityReducers/canvasWidgetsReducer.ts    |  20 +
 app/client/src/widgets/index.ts               |   2 +
 .../wds/WDSSelectWidget/config/anvilConfig.ts |  11 +
 .../config/autocompleteConfig.ts              |  11 +
 .../WDSSelectWidget/config/defaultsConfig.ts  |  20 +
 .../WDSSelectWidget/config/featuresConfig.ts  |   6 +
 .../wds/WDSSelectWidget/config/index.ts       |   7 +
 .../wds/WDSSelectWidget/config/metaConfig.ts  |   8 +
 .../WDSSelectWidget/config/methodsConfig.ts   |  21 +
 .../propertyPaneConfig/contentConfig.ts       | 465 ++++++++++++++++++
 .../config/propertyPaneConfig/index.ts        |   1 +
 .../validations/defaultOptionValidation.ts    |  67 +++
 .../propertyPaneConfig/validations/index.ts   |   2 +
 .../validations/optionsCustomValidation.ts    | 127 +++++
 .../WDSSelectWidget/config/settersConfig.ts   |  16 +
 .../src/widgets/wds/WDSSelectWidget/index.ts  |   3 +
 .../wds/WDSSelectWidget/widget/helpers.ts     |  16 +
 .../wds/WDSSelectWidget/widget/index.tsx      | 175 +++++++
 .../wds/WDSSelectWidget/widget/types.ts       |  13 +
 app/client/src/widgets/wds/constants.ts       |   1 +
 26 files changed, 1029 insertions(+), 15 deletions(-)
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/config/anvilConfig.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/config/autocompleteConfig.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/config/defaultsConfig.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/config/featuresConfig.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/config/index.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/config/metaConfig.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/config/methodsConfig.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/contentConfig.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/index.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/validations/defaultOptionValidation.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/validations/index.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/validations/optionsCustomValidation.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/config/settersConfig.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/index.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/widget/helpers.ts
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/widget/index.tsx
 create mode 100644 app/client/src/widgets/wds/WDSSelectWidget/widget/types.ts

diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx b/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx
index 50171e79909..4a7b3c7342c 100644
--- a/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx
@@ -1,19 +1,19 @@
-import React, { useRef } from "react";
-import clsx from "clsx";
+import { Icon, Label, Popover, Spinner, Text } from "@appsmith/wds";
 import { getTypographyClassName } from "@appsmith/wds-theming";
+import clsx from "clsx";
+import React, { useRef } from "react";
 import {
   Button,
-  ListBox,
+  FieldError,
   Select as HeadlessSelect,
+  ListBox,
   SelectValue,
-  FieldError,
 } from "react-aria-components";
-import { Text, Icon, Spinner, Popover, Label } from "@appsmith/wds";
 import { ListBoxItem } from "./ListBoxItem";
 import styles from "./styles.module.css";
 import type { SelectProps } from "./types";
 
-export const Select = <T extends object>(props: SelectProps<T>) => {
+export const Select = (props: SelectProps) => {
   const {
     contextualHelp,
     description,
@@ -53,7 +53,15 @@ export const Select = <T extends object>(props: SelectProps<T>) => {
                 styles.fieldValue,
                 getTypographyClassName("body"),
               )}
-            />
+            >
+              {({ defaultChildren, isPlaceholder }) => {
+                if (isPlaceholder) {
+                  return props.placeholder;
+                }
+
+                return defaultChildren;
+              }}
+            </SelectValue>
             {!Boolean(isLoading) && <Icon name="chevron-down" />}
             {Boolean(isLoading) && <Spinner />}
           </Button>
diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/index.ts b/app/client/packages/design-system/widgets/src/components/Select/src/index.ts
index b6e8a07c267..b252bd3f677 100644
--- a/app/client/packages/design-system/widgets/src/components/Select/src/index.ts
+++ b/app/client/packages/design-system/widgets/src/components/Select/src/index.ts
@@ -1 +1,2 @@
 export * from "./Select";
+export type { SelectProps } from "./types";
diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css
index 75f563e2eb3..10412f1d14a 100644
--- a/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css
@@ -8,6 +8,7 @@
   display: flex;
   position: relative;
   padding: 0;
+  height: var(--sizing-9);
   border: none;
   align-items: center;
   border-radius: var(--border-radius-elevation-3);
@@ -43,7 +44,7 @@
 
 .textField [data-icon] {
   position: absolute;
-  right: var(--inner-spacing-2);
+  right: var(--inner-spacing-1);
 }
 
 .necessityIndicator {
@@ -66,6 +67,10 @@
   flex: 1;
 }
 
+.fieldValue[data-placeholder] {
+  color: var(--color-fg-neutral-subtle);
+}
+
 .fieldValue [data-icon] {
   display: none;
 }
diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/types.ts b/app/client/packages/design-system/widgets/src/components/Select/src/types.ts
index c3220aa5b05..4e88e56cac3 100644
--- a/app/client/packages/design-system/widgets/src/components/Select/src/types.ts
+++ b/app/client/packages/design-system/widgets/src/components/Select/src/types.ts
@@ -5,10 +5,10 @@ import type {
 } from "react-aria-components";
 import type { IconProps, SIZES } from "@appsmith/wds";
 
-export interface SelectProps<T extends object>
-  extends Omit<SpectrumSelectProps<T>, "slot"> {
+export interface SelectProps
+  extends Omit<SpectrumSelectProps<SelectItem>, "slot"> {
   /** Item objects in the collection. */
-  items: Iterable<SelectItem>;
+  items: SelectItem[];
   /** The content to display as the label. */
   label?: string;
   /** The content to display as the description. */
diff --git a/app/client/src/components/propertyControls/KeyValueComponent.tsx b/app/client/src/components/propertyControls/KeyValueComponent.tsx
index 0ec815db0ec..a2f3add9a92 100644
--- a/app/client/src/components/propertyControls/KeyValueComponent.tsx
+++ b/app/client/src/components/propertyControls/KeyValueComponent.tsx
@@ -214,6 +214,8 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
             />
             <StyledBox />
             <Button
+              // At least one pair must be present
+              isDisabled={renderPairs.length <= 1}
               isIconButton
               kind="tertiary"
               onClick={(e: React.MouseEvent) => {
diff --git a/app/client/src/constants/PropertyControlConstants.tsx b/app/client/src/constants/PropertyControlConstants.tsx
index d6955b7754c..874b8aa8aee 100644
--- a/app/client/src/constants/PropertyControlConstants.tsx
+++ b/app/client/src/constants/PropertyControlConstants.tsx
@@ -55,15 +55,18 @@ export interface PanelConfig {
 }
 
 export interface PropertyPaneControlConfig {
+  // unique id to identify the property. It is added automatically with generateReactKey()
   id?: string;
+  // label is used to display the name of the property
   label: string;
+  // unique name of the property
   propertyName: string;
   // Serves in the tooltip
   helpText?: string;
-  //Dynamic text serves below the property pane inputs
-  // TODO: Fix this the next time the file is edited
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  helperText?: ((props: any) => React.ReactNode) | React.ReactNode;
+  // Dynamic text serves below the property pane inputs
+  helperText?: ((props: unknown) => React.ReactNode) | React.ReactNode;
+  // used to tell if the property is a JS convertible property.
+  // If true, It will show the little JS icon button next to the property name
   isJSConvertible?: boolean;
   customJSControl?: string;
   controlType: ControlType;
@@ -80,6 +83,7 @@ export interface PropertyPaneControlConfig {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     props: any,
   ) => UpdateWidgetPropertyPayload[];
+  // Function that is called when the property is updated, it is mainly used to update other properties
   updateHook?: (
     // TODO: Fix this the next time the file is edited
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -101,10 +105,12 @@ export interface PropertyPaneControlConfig {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   additionalAutoComplete?: (props: any) => AdditionalDynamicDataTree;
   evaluationSubstitutionType?: EvaluationSubstitutionType;
+  // all the properties that current property  is dependent on. All the properties passed here comes into widgetProperties
   dependencies?: string[];
   dynamicDependencies?: (widget: WidgetProps) => string[];
   evaluatedDependencies?: string[]; // dependencies to be picked from the __evaluated__ object
   expected?: CodeEditorExpected;
+  // Used to get value of the property from stylesheet config. Used in app theming v1 ( Not needed in anvil )
   getStylesheetValue?: (
     // TODO: Fix this the next time the file is edited
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/app/client/src/reducers/entityReducers/canvasWidgetsReducer.ts b/app/client/src/reducers/entityReducers/canvasWidgetsReducer.ts
index b4cfabe4a3c..197d45f8ac3 100644
--- a/app/client/src/reducers/entityReducers/canvasWidgetsReducer.ts
+++ b/app/client/src/reducers/entityReducers/canvasWidgetsReducer.ts
@@ -11,6 +11,7 @@ import {
 } from "utils/WidgetSizeUtils";
 import { klona } from "klona";
 import type { UpdateCanvasPayload } from "actions/pageActions";
+import type { SetWidgetDynamicPropertyPayload } from "../../actions/controlActions";
 
 /* This type is an object whose keys are widgetIds and values are arrays with property paths
 and property values
@@ -138,6 +139,25 @@ const canvasWidgetsReducer = createImmerReducer(initialState, {
   [ReduxActionTypes.RESET_EDITOR_REQUEST]: () => {
     return klona(initialState);
   },
+  [ReduxActionTypes.SET_WIDGET_DYNAMIC_PROPERTY]: (
+    state: CanvasWidgetsReduxState,
+    action: ReduxAction<SetWidgetDynamicPropertyPayload>,
+  ) => {
+    const { isDynamic, propertyPath, widgetId } = action.payload;
+    const widget = state[widgetId];
+
+    // When options JS mode is disabled, reset the optionLabel and optionValue to standard values
+    if (
+      widget.type === "WDS_SELECT_WIDGET" &&
+      propertyPath === "options" &&
+      !isDynamic
+    ) {
+      set(state, `${widgetId}.optionLabel`, "label");
+      set(state, `${widgetId}.optionValue`, "value");
+    }
+
+    return state;
+  },
 });
 
 export interface CanvasWidgetsReduxState {
diff --git a/app/client/src/widgets/index.ts b/app/client/src/widgets/index.ts
index e4f7c3ca0f9..3db9462bcaf 100644
--- a/app/client/src/widgets/index.ts
+++ b/app/client/src/widgets/index.ts
@@ -85,6 +85,7 @@ import { WDSEmailInputWidget } from "./wds/WDSEmailInputWidget";
 import { WDSPasswordInputWidget } from "./wds/WDSPasswordInputWidget";
 import { WDSNumberInputWidget } from "./wds/WDSNumberInputWidget";
 import { WDSMultilineInputWidget } from "./wds/WDSMultilineInputWidget";
+import { WDSSelectWidget } from "./wds/WDSSelectWidget";
 
 const LegacyWidgets = [
   CanvasWidget,
@@ -181,6 +182,7 @@ const WDSWidgets = [
   WDSPasswordInputWidget,
   WDSNumberInputWidget,
   WDSMultilineInputWidget,
+  WDSSelectWidget,
 ];
 
 const Widgets = [
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/config/anvilConfig.ts b/app/client/src/widgets/wds/WDSSelectWidget/config/anvilConfig.ts
new file mode 100644
index 00000000000..dc7fe21e103
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/config/anvilConfig.ts
@@ -0,0 +1,11 @@
+import type { AnvilConfig } from "WidgetProvider/constants";
+
+export const anvilConfig: AnvilConfig = {
+  isLargeWidget: false,
+  widgetSize: {
+    minWidth: {
+      base: "100%",
+      "180px": "sizing-30",
+    },
+  },
+};
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/config/autocompleteConfig.ts b/app/client/src/widgets/wds/WDSSelectWidget/config/autocompleteConfig.ts
new file mode 100644
index 00000000000..18c4a96be3e
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/config/autocompleteConfig.ts
@@ -0,0 +1,11 @@
+import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils";
+
+export const autocompleteConfig = {
+  "!doc":
+    "Select widget lets the user choose one option from a dropdown list. It is similar to a SingleSelect Dropdown in its functionality",
+  "!url": "https://docs.appsmith.com/widget-reference/radio",
+  isVisible: DefaultAutocompleteDefinitions.isVisible,
+  options: "[$__dropdownOption__$]",
+  selectedOptionValue: "string",
+  isRequired: "bool",
+};
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/config/defaultsConfig.ts b/app/client/src/widgets/wds/WDSSelectWidget/config/defaultsConfig.ts
new file mode 100644
index 00000000000..e8e7169c8ee
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/config/defaultsConfig.ts
@@ -0,0 +1,20 @@
+import { ResponsiveBehavior } from "layoutSystems/common/utils/constants";
+import type { WidgetDefaultProps } from "WidgetProvider/constants";
+
+export const defaultsConfig = {
+  animateLoading: true,
+  label: "Label",
+  options: [
+    { label: "Option 1", value: "1" },
+    { label: "Option 2", value: "2" },
+    { label: "Option 3", value: "3" },
+  ],
+  defaultOptionValue: "",
+  isRequired: false,
+  isDisabled: false,
+  isVisible: true,
+  isInline: false,
+  widgetName: "Select",
+  version: 1,
+  responsiveBehavior: ResponsiveBehavior.Fill,
+} as unknown as WidgetDefaultProps;
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/config/featuresConfig.ts b/app/client/src/widgets/wds/WDSSelectWidget/config/featuresConfig.ts
new file mode 100644
index 00000000000..60a677c66cb
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/config/featuresConfig.ts
@@ -0,0 +1,6 @@
+export const featuresConfig = {
+  dynamicHeight: {
+    sectionIndex: 3,
+    active: true,
+  },
+};
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/config/index.ts b/app/client/src/widgets/wds/WDSSelectWidget/config/index.ts
new file mode 100644
index 00000000000..995925903b3
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/config/index.ts
@@ -0,0 +1,7 @@
+export * from "./propertyPaneConfig";
+export { metaConfig } from "./metaConfig";
+export { anvilConfig } from "./anvilConfig";
+export { defaultsConfig } from "./defaultsConfig";
+export { settersConfig } from "./settersConfig";
+export { methodsConfig } from "./methodsConfig";
+export { autocompleteConfig } from "./autocompleteConfig";
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSSelectWidget/config/metaConfig.ts
new file mode 100644
index 00000000000..d7b522a26b3
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/config/metaConfig.ts
@@ -0,0 +1,8 @@
+import { WIDGET_TAGS } from "constants/WidgetConstants";
+
+export const metaConfig = {
+  name: "Select",
+  tags: [WIDGET_TAGS.SELECT],
+  needsMeta: true,
+  searchTags: ["choice", "option", "choose", "pick", "select", "dropdown"],
+};
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSSelectWidget/config/methodsConfig.ts
new file mode 100644
index 00000000000..d0c86d2c7db
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/config/methodsConfig.ts
@@ -0,0 +1,21 @@
+import type {
+  PropertyUpdates,
+  SnipingModeProperty,
+} from "WidgetProvider/constants";
+import { RadioGroupIcon, SelectThumbnail } from "appsmith-icons";
+
+export const methodsConfig = {
+  getSnipingModeUpdates: (
+    propValueMap: SnipingModeProperty,
+  ): PropertyUpdates[] => {
+    return [
+      {
+        propertyPath: "options",
+        propertyValue: propValueMap.data,
+        isDynamicPropertyPath: true,
+      },
+    ];
+  },
+  IconCmp: RadioGroupIcon,
+  ThumbnailCmp: SelectThumbnail,
+};
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/contentConfig.ts b/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/contentConfig.ts
new file mode 100644
index 00000000000..5a2caf621cb
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/contentConfig.ts
@@ -0,0 +1,465 @@
+import {
+  ValidationTypes,
+  type ValidationResponse,
+} from "constants/WidgetValidation";
+import { get, isPlainObject, uniq, type LoDashStatic } from "lodash";
+import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
+
+import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
+import { EVAL_VALUE_PATH } from "../../../../../utils/DynamicBindingUtils";
+import type { WidgetProps } from "../../../../BaseWidget";
+import type { WDSSelectWidgetProps } from "../../widget/types";
+import {
+  defaultOptionValidation,
+  optionsCustomValidation,
+} from "./validations";
+
+interface ValidationErrorMessage {
+  name: string;
+  message: string;
+}
+
+export const getOptionLabelValueExpressionPrefix = (widget: WidgetProps) =>
+  `{{${widget.widgetName}.sourceData.map((item) => (`;
+
+export const optionLabelValueExpressionSuffix = `))}}`;
+
+export function getLabelValueKeyOptions(
+  widget: WidgetProps,
+): Record<string, unknown>[] {
+  // UTILS
+  const isTrueObject = (item: unknown): item is Record<string, unknown> => {
+    return Object.prototype.toString.call(item) === "[object Object]";
+  };
+
+  const sourceData = get(widget, `${EVAL_VALUE_PATH}.options`);
+  const widgetOptions = get(widget, "options");
+  const options = sourceData || widgetOptions;
+
+  // Is Form mode, otherwise it is JS mode
+  if (Array.isArray(widgetOptions)) {
+    return options.map((option: Record<string, unknown> | string) => {
+      if (isTrueObject(option)) {
+        return {
+          label: option[widget.optionLabel],
+          value: option[widget.optionValue],
+        };
+      }
+
+      return [];
+    });
+  }
+
+  if (Array.isArray(options)) {
+    const x = uniq(
+      options.reduce((keys, obj) => {
+        if (isPlainObject(obj)) {
+          Object.keys(obj).forEach((d) => keys.push(d));
+        }
+
+        return keys;
+      }, []),
+    ).map((d: unknown) => ({
+      label: d,
+      value: d,
+    }));
+
+    return x;
+  } else {
+    return [];
+  }
+}
+
+export function labelKeyValidation(
+  value: unknown,
+  widgetProps: WDSSelectWidgetProps,
+  _: LoDashStatic,
+) {
+  // UTILS
+  const hasDuplicates = (array: unknown[]): boolean => {
+    const set = new Set(array);
+
+    return set.size !== array.length;
+  };
+
+  const createErrorValidationResponse = (
+    value: unknown,
+    message: ValidationErrorMessage,
+  ): ValidationResponse => ({
+    isValid: false,
+    parsed: value,
+    messages: [message],
+  });
+
+  const createSuccessValidationResponse = (
+    value: unknown,
+  ): ValidationResponse => ({
+    isValid: true,
+    parsed: value,
+  });
+
+  if (value === "" || _.isNil(value)) {
+    return createErrorValidationResponse(value, {
+      name: "ValidationError",
+      message: `value does not evaluate to type: string | Array<string>`,
+    });
+  }
+
+  if (Array.isArray(widgetProps.options)) {
+    const values = _.map(widgetProps.options, (option) => {
+      return option[widgetProps.optionLabel];
+    }).filter((d) => d);
+
+    if (values.length && hasDuplicates(values)) {
+      return createErrorValidationResponse(value, {
+        name: "ValidationError",
+        message: "Duplicate values found, value must be unique",
+      });
+    }
+  }
+
+  if (_.isString(value)) {
+    const keys = _.map(widgetProps.options, _.keys).flat();
+
+    if (!keys.includes(value)) {
+      return createErrorValidationResponse(value, {
+        name: "ValidationError",
+        message: "value key should be present in the options",
+      });
+    }
+
+    return createSuccessValidationResponse(value);
+  } else if (_.isArray(value)) {
+    const errorIndex = value.findIndex((d) => !_.isString(d));
+
+    if (errorIndex === -1) {
+      return createSuccessValidationResponse(value);
+    }
+
+    return createErrorValidationResponse(value, {
+      name: "ValidationError",
+      message: `Invalid entry at index: ${errorIndex}. This value does not evaluate to type: string`,
+    });
+  } else {
+    return createErrorValidationResponse(value, {
+      name: "ValidationError",
+      message: `value does not evaluate to type: string | Array<string>`,
+    });
+  }
+}
+
+export function getLabelValueAdditionalAutocompleteData(props: WidgetProps) {
+  const keys = getLabelValueKeyOptions(props);
+
+  return {
+    item: keys
+      .map((d) => d.label)
+      .reduce((prev: Record<string, string>, curr: unknown) => {
+        prev[curr as string] = "";
+
+        return prev;
+      }, {}),
+  };
+}
+
+export function valueKeyValidation(
+  value: unknown,
+  widgetProps: WDSSelectWidgetProps,
+  _: LoDashStatic,
+) {
+  // UTILS
+  const isTrueObject = (item: unknown): item is Record<string, unknown> => {
+    return Object.prototype.toString.call(item) === "[object Object]";
+  };
+
+  const hasDuplicates = (array: unknown[]): boolean => {
+    const set = new Set(array);
+
+    return set.size !== array.length;
+  };
+
+  const createErrorValidationResponse = (
+    value: unknown,
+    message: ValidationErrorMessage,
+  ): ValidationResponse => ({
+    isValid: false,
+    parsed: value,
+    messages: [message],
+  });
+
+  const createSuccessValidationResponse = (
+    value: unknown,
+  ): ValidationResponse => ({
+    isValid: true,
+    parsed: value,
+  });
+
+  if (value === "" || _.isNil(value) || !_.isString(value)) {
+    return createErrorValidationResponse(value, {
+      name: "ValidationError",
+      message:
+        "value does not evaluate to type: string | Array<string| number | boolean>",
+    });
+  }
+
+  if (!_.flatMap(widgetProps.options, _.keys).includes(value)) {
+    return createErrorValidationResponse(value, {
+      name: "ValidationError",
+      message: "value key should be present in the options",
+    });
+  }
+
+  if (!isTrueObject(widgetProps.options)) {
+    return createSuccessValidationResponse(value);
+  }
+
+  const values = _.map(widgetProps.options, (option) => {
+    if (isTrueObject(option)) {
+      return option[widgetProps.optionValue];
+    }
+  }).filter((d) => d);
+
+  if (values.length && hasDuplicates(values)) {
+    return createErrorValidationResponse(value, {
+      name: "ValidationError",
+      message: "Duplicate values found, value must be unique",
+    });
+  }
+
+  return createSuccessValidationResponse(value);
+}
+
+export const propertyPaneContentConfig = [
+  {
+    sectionName: "Data",
+    children: [
+      {
+        helpText: "Displays a list of unique options",
+        propertyName: "options",
+        label: "Options",
+        controlType: "OPTION_INPUT",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: false,
+        dependencies: ["optionLabel", "optionValue"],
+        validation: {
+          type: ValidationTypes.FUNCTION,
+          params: {
+            fn: optionsCustomValidation,
+            expected: {
+              type: 'Array<{ "label": "string", "value": "string" | number}>',
+              example: `[{"label": "One", "value": "one"}]`,
+              autocompleteDataType: AutocompleteDataType.STRING,
+            },
+          },
+        },
+        evaluationSubstitutionType: EvaluationSubstitutionType.SMART_SUBSTITUTE,
+      },
+      {
+        helpText: "Choose or set a field from source data as the display label",
+        propertyName: "optionLabel",
+        label: "Label key",
+        controlType: "DROP_DOWN",
+        customJSControl: "WRAPPED_CODE_EDITOR",
+        controlConfig: {
+          wrapperCode: {
+            prefix: getOptionLabelValueExpressionPrefix,
+            suffix: optionLabelValueExpressionSuffix,
+          },
+        },
+        placeholderText: "",
+        isBindProperty: true,
+        isTriggerProperty: false,
+        isJSConvertible: true,
+        evaluatedDependencies: ["options"],
+        options: getLabelValueKeyOptions,
+        alwaysShowSelected: true,
+        validation: {
+          type: ValidationTypes.FUNCTION,
+          params: {
+            fn: labelKeyValidation,
+            expected: {
+              type: "String or Array<string>",
+              example: `color | ["blue", "green"]`,
+              autocompleteDataType: AutocompleteDataType.STRING,
+            },
+          },
+        },
+        dependencies: ["options", "dynamicPropertyPathList"],
+        additionalAutoComplete: getLabelValueAdditionalAutocompleteData,
+        hidden: (props: WDSSelectWidgetProps) => {
+          return !(props.dynamicPropertyPathList || []).some(
+            ({ key }) => key === "options",
+          );
+        },
+      },
+      {
+        helpText: "Choose or set a field from source data as the value",
+        propertyName: "optionValue",
+        label: "Value key",
+        controlType: "DROP_DOWN",
+        customJSControl: "WRAPPED_CODE_EDITOR",
+        controlConfig: {
+          wrapperCode: {
+            prefix: getOptionLabelValueExpressionPrefix,
+            suffix: optionLabelValueExpressionSuffix,
+          },
+        },
+        placeholderText: "",
+        isBindProperty: true,
+        isTriggerProperty: false,
+        isJSConvertible: true,
+        evaluatedDependencies: ["options"],
+        options: getLabelValueKeyOptions,
+        alwaysShowSelected: true,
+        validation: {
+          type: ValidationTypes.FUNCTION,
+          params: {
+            fn: valueKeyValidation,
+            expected: {
+              type: "String or Array<string | number | boolean>",
+              example: `color | [1, "orange"]`,
+              autocompleteDataType: AutocompleteDataType.STRING,
+            },
+          },
+        },
+        dependencies: ["options", "dynamicPropertyPathList"],
+        additionalAutoComplete: getLabelValueAdditionalAutocompleteData,
+        hidden: (props: WDSSelectWidgetProps) => {
+          return !(props.dynamicPropertyPathList || []).some(
+            ({ key }) => key === "options",
+          );
+        },
+      },
+      {
+        helpText: "Sets a default selected option",
+        propertyName: "defaultOptionValue",
+        label: "Default selected value",
+        placeholderText: "",
+        controlType: "INPUT_TEXT",
+        isBindProperty: true,
+        isTriggerProperty: false,
+        dependencies: ["options"],
+        /**
+         * Changing the validation to FUNCTION.
+         * If the user enters Integer inside {{}} e.g. {{1}} then value should evalute to integer.
+         * If user enters 1 e.g. then it should evaluate as string.
+         */
+        validation: {
+          type: ValidationTypes.FUNCTION,
+          params: {
+            fn: defaultOptionValidation,
+            expected: {
+              type: `string |\nnumber (only works in mustache syntax)`,
+              example: `abc | {{1}}`,
+              autocompleteDataType: AutocompleteDataType.STRING,
+            },
+          },
+        },
+      },
+    ],
+  },
+  {
+    sectionName: "Label",
+    children: [
+      {
+        helpText: "Sets the label text of the options widget",
+        propertyName: "label",
+        label: "Text",
+        controlType: "INPUT_TEXT",
+        placeholderText: "Label",
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.TEXT },
+      },
+    ],
+  },
+  {
+    sectionName: "Validations",
+    children: [
+      {
+        propertyName: "isRequired",
+        label: "Required",
+        helpText: "Makes input to the widget mandatory",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.BOOLEAN },
+      },
+    ],
+  },
+  {
+    sectionName: "General",
+    children: [
+      {
+        helpText: "Show help text or details about current input",
+        propertyName: "labelTooltip",
+        label: "Tooltip",
+        controlType: "INPUT_TEXT",
+        placeholderText: "",
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.TEXT },
+      },
+      {
+        helpText: "Sets a placeholder text for the select",
+        propertyName: "placeholderText",
+        label: "Placeholder",
+        controlType: "INPUT_TEXT",
+        placeholderText: "",
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.TEXT },
+        hidden: (props: WDSSelectWidgetProps) => {
+          return Boolean(props.isReadOnly);
+        },
+      },
+      {
+        helpText: "Controls the visibility of the widget",
+        propertyName: "isVisible",
+        label: "Visible",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.BOOLEAN },
+      },
+      {
+        propertyName: "isDisabled",
+        label: "Disabled",
+        helpText: "Disables input to this widget",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.BOOLEAN },
+      },
+      {
+        propertyName: "animateLoading",
+        label: "Animate loading",
+        controlType: "SWITCH",
+        helpText: "Controls the loading of the widget",
+        defaultValue: true,
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: false,
+        validation: { type: ValidationTypes.BOOLEAN },
+      },
+    ],
+  },
+  {
+    sectionName: "Events",
+    children: [
+      {
+        helpText: "when a user changes the selected option",
+        propertyName: "onSelectionChange",
+        label: "onSelectionChange",
+        controlType: "ACTION_SELECTOR",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: true,
+      },
+    ],
+  },
+];
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/index.ts b/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/index.ts
new file mode 100644
index 00000000000..7f43d3bde57
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/index.ts
@@ -0,0 +1 @@
+export { propertyPaneContentConfig } from "./contentConfig";
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/validations/defaultOptionValidation.ts b/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/validations/defaultOptionValidation.ts
new file mode 100644
index 00000000000..4f4458fe960
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/validations/defaultOptionValidation.ts
@@ -0,0 +1,67 @@
+import type { ValidationResponse } from "constants/WidgetValidation";
+import type { LoDashStatic } from "lodash";
+import type { WidgetProps } from "../../../../../BaseWidget";
+
+interface ValidationErrorMessage {
+  name: string;
+  message: string;
+}
+
+interface ValidationErrorMessage {
+  name: string;
+  message: string;
+}
+
+export function defaultOptionValidation(
+  value: unknown,
+  widgetProps: WidgetProps,
+  _: LoDashStatic,
+): ValidationResponse {
+  // UTILS
+  const isTrueObject = (item: unknown): item is Record<string, unknown> => {
+    return Object.prototype.toString.call(item) === "[object Object]";
+  };
+
+  const createErrorValidationResponse = (
+    value: unknown,
+    message: ValidationErrorMessage,
+  ): ValidationResponse => ({
+    isValid: false,
+    parsed: value,
+    messages: [message],
+  });
+
+  const createSuccessValidationResponse = (
+    value: unknown,
+  ): ValidationResponse => ({
+    isValid: true,
+    parsed: value,
+  });
+
+  const { options } = widgetProps;
+
+  if (value === "") {
+    return createSuccessValidationResponse(value);
+  }
+
+  // Is Form mode, otherwise it is JS mode
+  if (Array.isArray(options)) {
+    const values = _.map(widgetProps.options, (option) => {
+      if (isTrueObject(option)) {
+        return option[widgetProps.optionValue];
+      }
+    });
+
+    if (!values.includes(value)) {
+      return createErrorValidationResponse(value, {
+        name: "ValidationError",
+        message:
+          "Default value is missing in options. Please update the value.",
+      });
+    }
+
+    return createSuccessValidationResponse(value);
+  }
+
+  return createSuccessValidationResponse(value);
+}
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/validations/index.ts b/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/validations/index.ts
new file mode 100644
index 00000000000..a7a09713fb4
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/validations/index.ts
@@ -0,0 +1,2 @@
+export { defaultOptionValidation } from "./defaultOptionValidation";
+export { optionsCustomValidation } from "./optionsCustomValidation";
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/validations/optionsCustomValidation.ts b/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/validations/optionsCustomValidation.ts
new file mode 100644
index 00000000000..5b526639e75
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/config/propertyPaneConfig/validations/optionsCustomValidation.ts
@@ -0,0 +1,127 @@
+import type { ValidationResponse } from "constants/WidgetValidation";
+import type { LoDashStatic } from "lodash";
+import type { WidgetProps } from "../../../../../BaseWidget";
+
+interface ValidationErrorMessage {
+  name: string;
+  message: string;
+}
+
+/**
+ * Validation rules:
+ * 1. This property will take the value in the following format: Array<{ "label": "string", "value": "string" | number}>
+ * 2. The `value` property should consists of unique values only.
+ * 3. Data types of all the value props should be the same.
+ */
+export function optionsCustomValidation(
+  options: unknown,
+  _props: WidgetProps,
+  _: LoDashStatic,
+): ValidationResponse {
+  // UTILS
+  const createErrorValidationResponse = (
+    value: unknown,
+    message: ValidationErrorMessage,
+  ): ValidationResponse => ({
+    isValid: false,
+    parsed: value,
+    messages: [message],
+  });
+
+  const createSuccessValidationResponse = (
+    value: unknown,
+  ): ValidationResponse => ({
+    isValid: true,
+    parsed: value,
+  });
+
+  const hasDuplicates = (array: unknown[]): boolean =>
+    new Set(array).size !== array.length;
+
+  // Is Form mode, otherwise it is JS mode
+  if (Array.isArray(options)) {
+    return createSuccessValidationResponse(options);
+  }
+
+  // JS expects options to be a string
+  if (!_.isString(options)) {
+    return createErrorValidationResponse(options, {
+      name: "TypeError",
+      message: "This value does not evaluate to type string",
+    });
+  }
+
+  const validationUtil = (options: unknown[]) => {
+    let _isValid = true;
+    let message = { name: "", message: "" };
+
+    if (options.length === 0) {
+      return createErrorValidationResponse(options, {
+        name: "ValidationError",
+        message: "Options cannot be an empty array",
+      });
+    }
+
+    for (let i = 0; i < options.length; i++) {
+      const option = options[i];
+
+      if (!_.isPlainObject(option)) {
+        _isValid = false;
+        message = {
+          name: "ValidationError",
+          message: "This value does not evaluate to type Object",
+        };
+        break;
+      }
+
+      if (_.keys(option).length === 0) {
+        _isValid = false;
+        message = {
+          name: "ValidationError",
+          message:
+            'This value does not evaluate to type { "label": "string", "value": "string" | number }',
+        };
+        break;
+      }
+
+      if (hasDuplicates(_.keys(option))) {
+        _isValid = false;
+        message = {
+          name: "ValidationError",
+          message: "All the keys must be unique",
+        };
+        break;
+      }
+    }
+
+    return {
+      isValid: _isValid,
+      parsed: _isValid ? options : [],
+      messages: [message],
+    };
+  };
+
+  const invalidResponse = {
+    isValid: false,
+    parsed: [],
+    messages: [
+      {
+        name: "TypeError",
+        message:
+          'This value does not evaluate to type Array<{ "label": "string", "value": "string" | number }>',
+      },
+    ],
+  };
+
+  try {
+    options = JSON.parse(options as string);
+
+    if (!Array.isArray(options)) {
+      return invalidResponse;
+    }
+
+    return validationUtil(options);
+  } catch (_error) {
+    return invalidResponse;
+  }
+}
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/config/settersConfig.ts b/app/client/src/widgets/wds/WDSSelectWidget/config/settersConfig.ts
new file mode 100644
index 00000000000..e6cf8f7fc4d
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/config/settersConfig.ts
@@ -0,0 +1,16 @@
+export const settersConfig = {
+  __setters: {
+    setVisibility: {
+      path: "isVisible",
+      type: "boolean",
+    },
+    setDisabled: {
+      path: "isDisabled",
+      type: "boolean",
+    },
+    setData: {
+      path: "options",
+      type: "array",
+    },
+  },
+};
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/index.ts b/app/client/src/widgets/wds/WDSSelectWidget/index.ts
new file mode 100644
index 00000000000..bd2d7fe6086
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/index.ts
@@ -0,0 +1,3 @@
+import { WDSSelectWidget } from "./widget";
+
+export { WDSSelectWidget };
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/widget/helpers.ts b/app/client/src/widgets/wds/WDSSelectWidget/widget/helpers.ts
new file mode 100644
index 00000000000..29a690d2845
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/widget/helpers.ts
@@ -0,0 +1,16 @@
+import type { Validation } from "widgets/wds/WDSInputWidget/widget/types";
+import type { WDSSelectWidgetProps } from "./types";
+
+export function validateInput(props: WDSSelectWidgetProps): Validation {
+  if (!props.isValid) {
+    return {
+      validationStatus: "invalid",
+      errorMessage: "Please select an option",
+    };
+  }
+
+  return {
+    validationStatus: "valid",
+    errorMessage: "",
+  };
+}
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSSelectWidget/widget/index.tsx
new file mode 100644
index 00000000000..7d7048f1092
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/widget/index.tsx
@@ -0,0 +1,175 @@
+import { Select } from "@appsmith/wds";
+import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
+import type { SetterConfig, Stylesheet } from "entities/AppTheming";
+import isNumber from "lodash/isNumber";
+import React from "react";
+import type {
+  AnvilConfig,
+  AutocompletionDefinitions,
+} from "WidgetProvider/constants";
+import type { WidgetState } from "widgets/BaseWidget";
+import BaseWidget from "widgets/BaseWidget";
+import {
+  anvilConfig,
+  autocompleteConfig,
+  defaultsConfig,
+  metaConfig,
+  methodsConfig,
+  propertyPaneContentConfig,
+  settersConfig,
+} from "../config";
+import { validateInput } from "./helpers";
+import type { WDSSelectWidgetProps } from "./types";
+import type { SelectItem } from "@appsmith/wds/src/components/Select/src/types";
+
+const isTrueObject = (item: unknown): item is Record<string, unknown> => {
+  return Object.prototype.toString.call(item) === "[object Object]";
+};
+
+class WDSSelectWidget extends BaseWidget<WDSSelectWidgetProps, WidgetState> {
+  static type = "WDS_SELECT_WIDGET";
+
+  static getConfig() {
+    return metaConfig;
+  }
+
+  static getDefaults() {
+    return defaultsConfig;
+  }
+
+  static getMethods() {
+    return methodsConfig;
+  }
+
+  static getAnvilConfig(): AnvilConfig | null {
+    return anvilConfig;
+  }
+
+  static getDependencyMap(): Record<string, string[]> {
+    return {
+      optionLabel: ["options"],
+      optionValue: ["options"],
+      defaultOptionValue: ["options"],
+    };
+  }
+
+  static getAutocompleteDefinitions(): AutocompletionDefinitions {
+    return autocompleteConfig;
+  }
+
+  static getPropertyPaneContentConfig() {
+    return propertyPaneContentConfig;
+  }
+
+  static getPropertyPaneStyleConfig() {
+    return [];
+  }
+
+  static getDerivedPropertiesMap() {
+    return {
+      selectedOption:
+        "{{_.find(this.options, { value: this.selectedOptionValue })}}",
+      isValid: `{{ this.isRequired ? !!this.selectedOptionValue : true }}`,
+      value: `{{this.selectedOptionValue}}`,
+    };
+  }
+
+  static getDefaultPropertiesMap(): Record<string, string> {
+    return {
+      selectedOptionValue: "defaultOptionValue",
+    };
+  }
+
+  static getMetaPropertiesMap() {
+    return {
+      selectedOptionValue: undefined,
+      isDirty: false,
+    };
+  }
+
+  static getStylesheetConfig(): Stylesheet {
+    return {};
+  }
+
+  componentDidUpdate(prevProps: WDSSelectWidgetProps): void {
+    if (
+      this.props.defaultOptionValue !== prevProps.defaultOptionValue &&
+      this.props.isDirty
+    ) {
+      this.props.updateWidgetMetaProperty("isDirty", false);
+    }
+  }
+
+  static getSetterConfig(): SetterConfig {
+    return settersConfig;
+  }
+
+  handleChange = (updatedValue: string | number) => {
+    let newVal;
+
+    if (isNumber(updatedValue)) {
+      newVal = updatedValue;
+    } else if (
+      isTrueObject(this.props.options[0]) &&
+      isNumber(this.props.options[0].value)
+    ) {
+      newVal = parseFloat(updatedValue);
+    } else {
+      newVal = updatedValue;
+    }
+    const { commitBatchMetaUpdates, pushBatchMetaUpdates } = this.props;
+    // Set isDirty to true when the selection changes
+    if (!this.props.isDirty) {
+      pushBatchMetaUpdates("isDirty", true);
+    }
+
+    pushBatchMetaUpdates("selectedOptionValue", newVal, {
+      triggerPropertyName: "onSelectionChange",
+      dynamicString: this.props.onSelectionChange,
+      event: {
+        type: EventType.ON_OPTION_CHANGE,
+      },
+    });
+    commitBatchMetaUpdates();
+  };
+
+  optionsToSelectItems = (
+    options: WDSSelectWidgetProps["options"],
+  ): SelectItem[] => {
+    if (Array.isArray(options)) {
+      return options.map((option) => ({
+        label: option[this.props.optionLabel || "label"] as string,
+        id: option[this.props.optionValue || "value"] as string,
+      }));
+    }
+
+    return [];
+  };
+
+  getWidgetView() {
+    const {
+      labelTooltip,
+      options,
+      placeholderText,
+      selectedOptionValue,
+      ...rest
+    } = this.props;
+
+    const validation = validateInput(this.props);
+
+    return (
+      <Select
+        {...rest}
+        contextualHelp={labelTooltip}
+        errorMessage={validation.errorMessage}
+        isInvalid={validation.validationStatus === "invalid"}
+        items={this.optionsToSelectItems(options)}
+        onSelectionChange={this.handleChange}
+        placeholder={placeholderText}
+        selectedKey={selectedOptionValue}
+      />
+    );
+  }
+}
+
+export { WDSSelectWidget };
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/widget/types.ts b/app/client/src/widgets/wds/WDSSelectWidget/widget/types.ts
new file mode 100644
index 00000000000..5bcda798196
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSSelectWidget/widget/types.ts
@@ -0,0 +1,13 @@
+import type { WidgetProps } from "widgets/BaseWidget";
+
+export interface WDSSelectWidgetProps extends WidgetProps {
+  options: Record<string, unknown>[] | string;
+  selectedOptionValue: string;
+  onSelectionChange: string;
+  defaultOptionValue: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  label: string;
+  labelTooltip?: string;
+  isDirty: boolean;
+}
diff --git a/app/client/src/widgets/wds/constants.ts b/app/client/src/widgets/wds/constants.ts
index a4ac01a32eb..0c467613936 100644
--- a/app/client/src/widgets/wds/constants.ts
+++ b/app/client/src/widgets/wds/constants.ts
@@ -57,6 +57,7 @@ export const WDS_V2_WIDGET_MAP = {
   PASSWORD_INPUT_WIDGET: "WDS_PASSWORD_INPUT_WIDGET",
   NUMBER_INPUT_WIDGET: "WDS_NUMBER_INPUT_WIDGET",
   MULTILINE_INPUT_WIDGET: "WDS_MULTILINE_INPUT_WIDGET",
+  WDS_SELECT_WIDGET: "WDS_SELECT_WIDGET",
 
   // Anvil layout widgets
   ZONE_WIDGET: anvilWidgets.ZONE_WIDGET,