diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..9863893e4
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "[mdx]": {
+    "editor.wordWrap": "on"
+  }
+}
diff --git a/config/eslint.config.js b/config/eslint.config.js
index 03da9695e..2c7016a2b 100644
--- a/config/eslint.config.js
+++ b/config/eslint.config.js
@@ -80,6 +80,13 @@ module.exports = {
     "@typescript-eslint/no-useless-constructor": "error",
 
     "@typescript-eslint/consistent-type-assertions": "warn",
+
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        devDependencies: [".storybook/**", "**/*.stories.tsx"],
+      },
+    ],
   },
   settings: {
     react: {
diff --git a/packages/css/src/Form/InputSelect/InputSelect.agent.scss b/packages/css/src/Form/InputSelect/InputSelect.agent.scss
new file mode 100644
index 000000000..94c892b22
--- /dev/null
+++ b/packages/css/src/Form/InputSelect/InputSelect.agent.scss
@@ -0,0 +1,112 @@
+@use "../../common/common.agent.scss" as common;
+@use "../core/FormCore.agent.scss";
+@use "../../common/grid.scss";
+@use "../../common/reboot.scss";
+
+@mixin _set-message-type($color) {
+  .af-form__input-text {
+    border: 1px solid $color;
+    color: $color;
+  }
+
+  .af-form__select-container {
+    border: 1px solid $color;
+    color: $color;
+  }
+}
+
+.af-form {
+  &__select {
+    position: relative;
+
+    &-container {
+      position: relative;
+      display: inline-block;
+      border: 1px solid common.$color-silver;
+      background: common.$white;
+
+      .glyphicon-menu-down {
+        position: absolute;
+        top: 50%;
+        right: 1em;
+        font-size: 0.7em;
+        transform: translateY(-50%);
+      }
+    }
+
+    &--success,
+    &--valid {
+      .af-form__select-container {
+        margin-right: 1rem;
+      }
+
+      &::after {
+        font-family: common.$font-family-icon;
+        color: common.$color-malachite;
+        content: "\EABA";
+      }
+
+      > .af-btn--circle,
+      > .af-form__message {
+        display: none;
+      }
+    }
+
+    &--valid {
+      &::after {
+        display: none;
+      }
+
+      .glyphicon-ok {
+        position: absolute;
+        top: 50%;
+        right: -25px;
+        width: 17px;
+        margin-left: 2px;
+        transform: translate(0, -50%);
+        fill: common.$color-btn-success;
+      }
+    }
+
+    &--disabled {
+      .af-form__select-container {
+        background: common.$color-mercury;
+        cursor: not-allowed;
+      }
+    }
+
+    &--error {
+      @include _set-message-type(common.$color-red-axa);
+
+      select {
+        color: common.$color-red-axa;
+      }
+    }
+
+    &--warning {
+      @include _set-message-type(common.$color-orange-dark);
+    }
+  }
+
+  &__input-select {
+    position: relative;
+    z-index: 1;
+    padding: 0.5em 2.7em 0.5em 1em;
+    border: 0;
+    font-size: 1em;
+    background: transparent;
+    appearance: none;
+
+    &::-ms-expand {
+      display: none;
+    }
+
+    &:focus {
+      border-color: common.$color-axa;
+    }
+
+    &--hasinfobulle {
+      margin-right: 1rem;
+    }
+  }
+}
diff --git a/packages/css/src/Form/InputSelect/InputSelect.agent.stories.ts b/packages/css/src/Form/InputSelect/InputSelect.agent.stories.ts
new file mode 100644
index 000000000..f7bebdf40
--- /dev/null
+++ b/packages/css/src/Form/InputSelect/InputSelect.agent.stories.ts
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/html";
+import "../../common/icons.scss";
+import "./InputSelect.agent.scss";
+
+const meta: Meta = {
+  title: "Select",
+};
+
+export default meta;
+
+export const Default: StoryObj = {
+  render: () => {
+    const btn = document.createElement("div");
+    btn.innerHTML = `<div class="col-md-2">
+    <label class="af-form__group-label" for="select-story">Input Select *</label>
+</div>
+<div class="col-md-10">
+    <div class="af-form__select">
+        <div class="af-form__select-container">
+            <select class="af-form__input-select" id="select-story" name="select-story" type="text">
+                <option value="" disabled selected>- Sélectionner -</option>
+                <option value="1">Option 1</option>
+                <option value="2">Option 2</option>
+                <option value="3">Option 3</option>
+                <option value="4">Option 4</option>
+            </select>
+            <span aria-controls="select-story" class="glyphicon glyphicon-menu-down" />
+        </div><small class="af-form__message">Aide à la saisie</small>
+    </div>
+</div>`;
+
+    btn.className = "af-form__group row";
+
+    return btn;
+  },
+  args: {
+    label: "Select",
+  },
+  argTypes: {},
+};
diff --git a/packages/css/src/Form/InputText/InputText.agent.scss b/packages/css/src/Form/InputText/InputText.agent.scss
index 9aafcd708..a9059441c 100644
--- a/packages/css/src/Form/InputText/InputText.agent.scss
+++ b/packages/css/src/Form/InputText/InputText.agent.scss
@@ -84,14 +84,6 @@
     display: none;
   }
 
-  &__help {
-    position: absolute;
-    bottom: -20px;
-    display: block;
-    font-size: 0.8125em;
-    color: common.$color-gray;
-  }
-
   &__clear {
     position: absolute;
     top: 0.75rem;
diff --git a/packages/css/src/Form/core/FormCore.agent.scss b/packages/css/src/Form/core/FormCore.agent.scss
index 900f10126..89f862278 100644
--- a/packages/css/src/Form/core/FormCore.agent.scss
+++ b/packages/css/src/Form/core/FormCore.agent.scss
@@ -50,6 +50,14 @@
     }
   }
 
+  &__help {
+    position: absolute;
+    bottom: -20px;
+    display: block;
+    font-size: 0.8125em;
+    color: common.$color-gray;
+  }
+
   &__input-cmplt {
     display: inline-flex;
     margin-left: 1rem;
diff --git a/packages/react/src/Form/Select/Select.mdx b/packages/react/src/Form/Select/Select.mdx
new file mode 100644
index 000000000..4ba3da9ca
--- /dev/null
+++ b/packages/react/src/Form/Select/Select.mdx
@@ -0,0 +1,45 @@
+import * as SelectInputStories from "./SelectInput.stories.tsx";
+import * as SelectStories from "./Select.stories.tsx";
+import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
+
+<Meta of={SelectInputStories} />
+
+# Select
+
+The select component comes in two variants: [**with layout** `InputSelect`](#inputselect--with-label) and [**without** label `Select`](#select-without-label).
+`SelectBase` also exists, but is just the `Select` component in `mode="base"`, and will be deprecated in the future.
+
+In most cases you will want to use the version with the label. However, in some cases, the default layout will not work for you.
+In that case, you can use the version without the label.
+
+## `InputSelect` — With label
+
+This is the complete component, with label, description, and error message.
+
+<Canvas of={SelectInputStories.SelectInputStory} />
+
+<ArgsTable story="Select with label" />
+
+### Required
+
+The component can be required. In that case, the label will be followed by a red asterisk. In order to make the component required, you need to add to the `classModifier` the value `required`.
+
+### Status messages
+
+The component can be in one of 4 states: the default one which will display the help message, `success`, `error`, and `warning`.
+In order to display the message and color the component, you need to pass the `message`, `messageType` props and set `forceDisplayMessage` to `true`.
+
+<Canvas of={SelectInputStories.SelectWithStatus} />
+
+### Placeholders
+
+The component comes with 2 modes : `base` and `default`. The only difference is that the `base` mode **never** displays the placeholder.
+If you are not sure which mode to use, use the `default` mode.
+
+## `Select` Without label
+
+The component without the label is a bare-bones version of the component. It is useful when you need to customize the layout of the component.
+
+<Canvas of={SelectStories.SelectStory} />
+
+<ArgsTable story="Select" />
diff --git a/packages/react/src/Form/Select/Select.stories.tsx b/packages/react/src/Form/Select/Select.stories.tsx
new file mode 100644
index 000000000..9a6af10fd
--- /dev/null
+++ b/packages/react/src/Form/Select/Select.stories.tsx
@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
+import { Select } from "./Select";
+
+const options = [
+  { value: "fun", label: "For fun" },
+  { value: "work", label: "For work" },
+  { value: "drink", label: "For drink" },
+];
+
+const meta: Meta<typeof Select> = {
+  component: Select,
+  title: "Components/Form/Input/Select",
+  argTypes: { onChange: { action: "onChange" } },
+};
+
+export default meta;
+
+type StoryProps = ComponentProps<typeof Select>;
+type Story = StoryObj<StoryProps>;
+
+export const SelectStory: Story = {
+  name: "Select",
+  tags: ["Form", "Input"],
+  render: ({ onChange, ...args }) => <Select onChange={onChange} {...args} />,
+  args: {
+    mode: "default",
+    className: "",
+    options,
+    placeholder: "- Select -",
+    name: "name",
+    id: "nameid",
+    disabled: false,
+  },
+  argTypes: {
+    mode: {
+      control: {
+        type: "select",
+        options: ["default", "base"],
+      },
+    },
+  },
+};
diff --git a/packages/react/src/Form/Select/Select.tsx b/packages/react/src/Form/Select/Select.tsx
new file mode 100644
index 000000000..b07038582
--- /dev/null
+++ b/packages/react/src/Form/Select/Select.tsx
@@ -0,0 +1,13 @@
+import { ComponentProps } from "react";
+import { SelectBase } from "./SelectBase";
+import { SelectDefault } from "./SelectDefault";
+
+type SelectProps = ComponentProps<typeof SelectDefault> & {
+  mode?: "default" | "base";
+};
+const Select = ({ mode = "default", children, ...props }: SelectProps) => {
+  const DynamicComponent = mode === "default" ? SelectDefault : SelectBase;
+  return <DynamicComponent {...props}>{children}</DynamicComponent>;
+};
+
+export { Select };
diff --git a/packages/react/src/Form/Select/SelectBase.tsx b/packages/react/src/Form/Select/SelectBase.tsx
new file mode 100644
index 000000000..6cd15c426
--- /dev/null
+++ b/packages/react/src/Form/Select/SelectBase.tsx
@@ -0,0 +1,50 @@
+import "@axa-fr/design-system-css/dist/Form/InputSelect/InputSelect.agent.scss";
+import {
+  ComponentPropsWithoutRef,
+  forwardRef,
+  OptionHTMLAttributes,
+} from "react";
+import { getComponentClassName } from "../core";
+
+type Props = Omit<
+  ComponentPropsWithoutRef<"select"> & {
+    options: OptionHTMLAttributes<HTMLOptionElement>[];
+    classModifier?: string;
+  },
+  "required"
+>;
+
+/**
+ * @deprecated Use Select instead
+ */
+const SelectBase = forwardRef<HTMLSelectElement, Props>(
+  ({ options, id, className, classModifier, ...otherProps }, inputRef) => {
+    const componentClassName = getComponentClassName(
+      className,
+      classModifier,
+      "af-form__input-select",
+    );
+    return (
+      <div className="af-form__select-container">
+        <select
+          {...otherProps}
+          id={id}
+          className={componentClassName}
+          ref={inputRef}
+          required={classModifier?.includes("required")}
+        >
+          {options.map(({ label, ...opt }) => (
+            <option key={opt.value?.toString()} {...opt}>
+              {label}
+            </option>
+          ))}
+        </select>
+        <span aria-controls={id} className="glyphicon glyphicon-menu-down" />
+      </div>
+    );
+  },
+);
+
+SelectBase.displayName = "SelectBase";
+
+export { SelectBase };
diff --git a/packages/react/src/Form/Select/SelectDefault.tsx b/packages/react/src/Form/Select/SelectDefault.tsx
new file mode 100644
index 000000000..a063525e3
--- /dev/null
+++ b/packages/react/src/Form/Select/SelectDefault.tsx
@@ -0,0 +1,41 @@
+import { ComponentPropsWithRef, useId, useState } from "react";
+import { SelectBase } from "./SelectBase";
+
+type Props = ComponentPropsWithRef<typeof SelectBase> & {
+  forceDisplayPlaceholder?: boolean;
+  placeholder?: string;
+};
+
+const SelectDefault = ({
+  onChange,
+  forceDisplayPlaceholder = false,
+  value,
+  placeholder = "- Select -",
+  options,
+  id,
+  ...otherProps
+}: Props) => {
+  const [hasHandleChangeOnce, setHasHandleChangeOnce] = useState(false);
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const newOptions = hasHandleChangeOnce
+    ? options
+    : [{ value: "", label: placeholder }, ...options];
+
+  return (
+    <SelectBase
+      {...otherProps}
+      id={inputId}
+      value={value}
+      options={newOptions}
+      onChange={(e) => {
+        if (onChange) {
+          onChange(e);
+        }
+        setHasHandleChangeOnce(!forceDisplayPlaceholder);
+      }}
+    />
+  );
+};
+
+export { SelectDefault };
diff --git a/packages/react/src/Form/Select/SelectInput.stories.tsx b/packages/react/src/Form/Select/SelectInput.stories.tsx
new file mode 100644
index 000000000..932f843cb
--- /dev/null
+++ b/packages/react/src/Form/Select/SelectInput.stories.tsx
@@ -0,0 +1,125 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
+import { MessageTypes } from "../core";
+import { SelectInput } from "./SelectInput";
+
+const meta: Meta<typeof SelectInput> = {
+  component: SelectInput,
+  title: "Components/Form/Input/Select",
+  argTypes: { onChange: { action: "onChange" } },
+};
+
+export default meta;
+
+type StoryProps = ComponentProps<typeof SelectInput>;
+type Story = StoryObj<StoryProps>;
+
+const options = [
+  { value: "fun", label: "For fun" },
+  { value: "work", label: "For work" },
+  { value: "drink", label: "For drink" },
+];
+
+export const SelectInputStory: Story = {
+  name: "Select with label",
+  tags: ["Form", "Input"],
+  render: ({ onChange, ...args }) => (
+    <SelectInput onChange={onChange} {...args} />
+  ),
+  args: {
+    label: "Place type",
+    mode: "default",
+    helpMessage: "Enter the place type",
+    disabled: false,
+    isVisible: true,
+    classModifier: "",
+    className: "",
+    placeholder: "- Select -",
+    message: "",
+    messageType: undefined,
+    forceDisplayMessage: false,
+    classNameContainerLabel: "col-md-2",
+    classNameContainerInput: "col-md-10",
+    forceDisplayPlaceholder: false,
+    name: "placeName",
+    options,
+  },
+  argTypes: {
+    messageType: {
+      control: {
+        type: "select",
+        options: Object.keys(MessageTypes),
+      },
+    },
+    classModifier: {
+      control: "inline-check",
+      options: ["required"],
+    },
+    name: { table: { disable: true } },
+    id: { table: { disable: true } },
+    setStateMemoryFn: { table: { disable: true } },
+    onChangeByStateFn: { table: { disable: true } },
+    initialState: { table: { disable: true } },
+    setStateOnFocusFn: { table: { disable: true } },
+    setStateOnBlurFn: { table: { disable: true } },
+    roleContainer: { table: { disable: true } },
+    ariaLabelContainer: { table: { disable: true } },
+    isLabelContainerLinkedToInput: { table: { disable: true } },
+  },
+};
+
+export const SelectWithStatus: StoryObj<ComponentProps<typeof SelectInput>> = {
+  name: "Select with statuses",
+  tags: ["Form", "Input"],
+  render: ({ onChange }) => (
+    <>
+      <SelectInput
+        onChange={onChange}
+        label="Select in error"
+        options={[
+          {
+            value: "badoption",
+            label: "This is a bad option 😈",
+          },
+        ]}
+        value="badoption"
+        forceDisplayMessage
+        message="The bad option is forbidden"
+        messageType={MessageTypes.error}
+      />
+
+      <SelectInput
+        onChange={onChange}
+        label="Select with warning"
+        options={[
+          {
+            value: "dangerousoption",
+            label: "This is a dangerous option 🔥",
+          },
+        ]}
+        value="dangerousoption"
+        forceDisplayMessage
+        message="The dangerous option is dangerous"
+        messageType={MessageTypes.warning}
+      />
+
+      <SelectInput
+        onChange={onChange}
+        label="Select in sucess"
+        options={[
+          {
+            value: "validoption",
+            label: "This is a valid option 🙂",
+          },
+        ]}
+        value="validoption"
+        forceDisplayMessage
+        message="The option is valid, congratz 🎉"
+        messageType={MessageTypes.success}
+      />
+    </>
+  ),
+  argTypes: {
+    onChange: { action: "onChange" },
+  },
+};
diff --git a/packages/react/src/Form/Select/SelectInput.tsx b/packages/react/src/Form/Select/SelectInput.tsx
new file mode 100644
index 000000000..131339725
--- /dev/null
+++ b/packages/react/src/Form/Select/SelectInput.tsx
@@ -0,0 +1,64 @@
+import { ComponentProps, PropsWithChildren, ReactNode, useId } from "react";
+
+import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import { Select } from "./Select";
+
+type Props = ComponentProps<typeof Field> &
+  ComponentProps<typeof Select> & {
+    helpMessage?: ReactNode;
+  };
+
+const SelectInput = ({
+  classModifier = "",
+  message,
+  children,
+  helpMessage,
+  id,
+  disabled = false,
+  label,
+  classNameContainerLabel,
+  classNameContainerInput,
+  messageType,
+  isVisible,
+  forceDisplayMessage,
+  className,
+  ...otherSelectProps
+}: PropsWithChildren<Props>) => {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(
+    classModifier,
+    disabled,
+    Boolean(children),
+  );
+  return (
+    <Field
+      label={label}
+      id={inputId}
+      message={message}
+      messageType={messageType}
+      isVisible={isVisible}
+      forceDisplayMessage={forceDisplayMessage}
+      className={className}
+      classModifier={inputFieldClassModifier}
+      classNameContainerLabel={classNameContainerLabel}
+      classNameContainerInput={classNameContainerInput}
+    >
+      <FieldInput
+        className="af-form__select"
+        classModifier={inputFieldClassModifier}
+      >
+        <Select
+          id={inputId}
+          disabled={disabled}
+          classModifier={inputClassModifier}
+          {...otherSelectProps}
+        />
+        {children}
+      </FieldInput>
+      <HelpMessage message={helpMessage} isVisible={!message} />
+    </Field>
+  );
+};
+
+export { SelectInput };
diff --git a/packages/react/src/Form/Select/index.ts b/packages/react/src/Form/Select/index.ts
new file mode 100644
index 000000000..47fffb6e6
--- /dev/null
+++ b/packages/react/src/Form/Select/index.ts
@@ -0,0 +1,3 @@
+export { Select } from "./Select";
+export { SelectBase } from "./SelectBase";
+export { SelectInput } from "./SelectInput";
diff --git a/packages/react/src/agent.ts b/packages/react/src/agent.ts
index 26a3aa787..4300063ff 100644
--- a/packages/react/src/agent.ts
+++ b/packages/react/src/agent.ts
@@ -3,6 +3,7 @@ import "@fontsource/source-sans-pro";
 
 export { ButtonAgent as Button } from "./Button/Button.agent";
 export { Text, TextInput } from "./Form/InputText";
+export { Select, SelectBase, SelectInput } from "./Form/Select";
 export {
   Field,
   FieldError,