diff --git a/src/BIMDataComponents/BIMDataInputOutlined/BIMDataInputOutlined.vue b/src/BIMDataComponents/BIMDataInputOutlined/BIMDataInputOutlined.vue
new file mode 100644
index 00000000..b3e3f1c2
--- /dev/null
+++ b/src/BIMDataComponents/BIMDataInputOutlined/BIMDataInputOutlined.vue
@@ -0,0 +1,182 @@
+<template>
+  <div
+    class="bimdata-input-outlined"
+    :class="{
+      error,
+      success,
+      disabled,
+      loading,
+      empty:
+        modelValue === undefined || modelValue === null || modelValue === '',
+    }"
+    :style="style"
+  >
+    <fieldset>
+      <label v-if="label" :for="`bimdata-input-outlined-${uuid}`" class="m-b-6"
+        ><slot name="label">Label here</slot></label
+      >
+      <div class="flex items-center">
+        <slot name="prefix"></slot>
+        <div class="bimdata-input-outlined__container">
+          <div class="bimdata-input-outlined__container__prefix-inner">
+            <slot name="prefixInner"></slot>
+          </div>
+          <input
+            ref="input"
+            :type="inputType"
+            :id="`bimdata-input-${uuid}`"
+            @input="$emit('update:modelValue', $event.currentTarget.value)"
+            :disabled="disabled"
+            :value="modelValue"
+            :placeholder="placeholder"
+            @focus="
+              $event.target.select();
+              $emit('focus', $event);
+            "
+            @blur="$emit('blur', $event)"
+            @keypress="$emit('keypress', $event)"
+            @change="$emit('change', $event)"
+            :autocomplete="autocomplete ? 'on' : 'off'"
+            v-bind="$attrs"
+            :maxlength="maxLength"
+          />
+          <BIMDataSpinner v-if="loading" class="items-center"></BIMDataSpinner>
+          <div class="bimdata-input-outlined__container__suffix-inner">
+            <slot name="suffixInner"></slot>
+          </div>
+        </div>
+        <slot name="suffix"></slot>
+      </div>
+    </fieldset>
+    <div
+      class="flex items-center"
+      :class="error || success ? 'justify-between' : 'justify-end'"
+    >
+      <span v-if="error" class="error">{{ errorMessage }}</span>
+      <span v-if="success" class="success">{{ successMessage }}</span>
+      <span v-if="counter" class="counter m-l-12">
+        {{ modelValue.length }}
+        / {{ maxLength }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+let uuid = 0;
+
+export default {
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue",
+  },
+  props: {
+    autocomplete: {
+      type: Boolean,
+      default: false,
+    },
+    counter: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    error: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: "",
+    },
+    inputType: {
+      type: String,
+      default: "text",
+      validator: type => {
+        const possibleTypes = [
+          "text",
+          "password",
+          "number",
+          "file",
+          "url",
+          "time",
+          "email",
+          "tel",
+        ];
+        return possibleTypes.includes(type);
+      },
+    },
+    label: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    margin: {
+      type: String,
+      default: "12px 0px",
+    },
+    maxLength: {
+      type: Number,
+      default: 100,
+    },
+    modelValue: {
+      type: [String, Number],
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    success: {
+      type: Boolean,
+      default: false,
+    },
+    successMessage: {
+      type: String,
+      default: "",
+    },
+    width: {
+      type: String,
+      default: "250px",
+    },
+  },
+  emits: ["update:modelValue", "blur", "keypress", "focus", "change"],
+  computed: {
+    style() {
+      return {
+        margin: `${this.margin}`,
+        width: `${this.width}`,
+      };
+    },
+  },
+  beforeCreate() {
+    this.uuid = uuid.toString();
+    uuid += 1;
+  },
+  created() {
+    this.$watch(
+      () => this.success && this.error,
+      successAndError => {
+        if (successAndError) {
+          throw new Error("Input state cannot be both success and error.");
+        }
+      },
+    );
+  },
+  methods: {
+    focus() {
+      this.$refs.input?.focus();
+    },
+    blur() {
+      this.$refs.input?.blur();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./_BIMDataInputOutlined.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataInputOutlined/_BIMDataInputOutlined.scss b/src/BIMDataComponents/BIMDataInputOutlined/_BIMDataInputOutlined.scss
new file mode 100644
index 00000000..4194ab44
--- /dev/null
+++ b/src/BIMDataComponents/BIMDataInputOutlined/_BIMDataInputOutlined.scss
@@ -0,0 +1,96 @@
+@import "../../assets/scss/mixins/_font-size.scss";
+
+input:-webkit-autofill {
+  box-shadow: 0 0 0px 1000px var(--color-white) inset;
+}
+
+.bimdata-input-outlined {
+  position: relative;
+  font-family: var(--primary-font);
+  color: var(--color-primary);
+  fieldset {
+    margin: 0;
+    padding: 0;
+    border: none;
+    label {
+      display: block;
+      font-size: 10px;
+      text-transform: uppercase;
+      font-weight: bold;
+      letter-spacing: 0.6px;
+      color: var(--color-granite-light);
+    }
+  }
+  &__container {
+    padding: 0 calc(var(--spacing-unit) / 2);
+    width: 100%;
+    height: 100%;
+    border: 1px solid var(--color-silver);
+    border-radius: 3px;
+    display: flex;
+    flex: 1;
+    font-size: 14px;
+    overflow: hidden;
+    position: relative;
+    z-index: 0;
+    input {
+      width: 100%;
+      min-height: 32px;
+      font-size: 14px;
+      color: var(--color-primary);
+      background-color: transparent;
+      border-style: none;
+      cursor: auto;
+      font-family: inherit;
+      &:focus {
+        outline: none;
+      }
+    }
+    &__prefix-inner,
+    &__suffix-inner {
+      align-content: center;
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .error {
+    color: var(--color-high);
+    font-size: 11px;
+  }
+  .success {
+    color: var(--color-success);
+    font-size: 11px;
+  }
+  &.disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+  &.error {
+    .bimdata-input-outlined__container {
+      border-color: var(--color-high);
+      background-color: var(--color-high-lighter);
+    }
+  }
+  &.success {
+    .bimdata-input-outlined__container {
+      border-color: var(--color-success);
+      background-color: var(--color-success-lighter);
+    }
+  }
+  .counter {
+    font-size: 11px;
+    letter-spacing: -0.5px;
+    color: var(--color-granite-light);
+  }
+  &[type="file"] {
+    .bimdata-input-outlined__container {
+      border: none;
+    }
+  }
+  &[type="number"] {
+    input {
+      appearance: textfield;
+    }
+  }
+}
diff --git a/src/BIMDataComponents/index.js b/src/BIMDataComponents/index.js
index cb169df1..dee2bb2c 100644
--- a/src/BIMDataComponents/index.js
+++ b/src/BIMDataComponents/index.js
@@ -21,6 +21,7 @@ export { default as BIMDataIcon } from "./BIMDataIcon/BIMDataIcon.vue";
 export * from "./BIMDataIcon/BIMDataIconStandalone/index.js";
 export { default as BIMDataIllustration } from "./BIMDataIllustration/BIMDataIllustration.vue";
 export { default as BIMDataInput } from "./BIMDataInput/BIMDataInput.vue";
+export { default as BIMDataInputOutlined } from "./BIMDataInputOutlined/BIMDataInputOutlined.vue";
 export { default as BIMDataLoading } from "./BIMDataLoading/BIMDataLoading.vue";
 export { default as BIMDataMenu } from "./BIMDataMenu/BIMDataMenu.vue";
 export { default as BIMDataMenuInline } from "./BIMDataMenuInline/BIMDataMenuInline.vue";
diff --git a/src/web/views/Components/Input/Input.vue b/src/web/views/Components/Input/Input.vue
index a2cd392a..8878b884 100644
--- a/src/web/views/Components/Input/Input.vue
+++ b/src/web/views/Components/Input/Input.vue
@@ -4,6 +4,7 @@
       <BIMDataText component="h1" color="color-primary">
         {{ $route.name }}
       </BIMDataText>
+      <h2>Basic input</h2>
       <ComponentCode :componentTitle="$route.name" language="javascript">
         <template #module>
           <BIMDataInput
@@ -17,6 +18,7 @@
             :disabled="getDisabled()"
             :margin="marginInput"
           >
+            >
             <template #inputIcon v-if="inputIcon">
               <BIMDataIconShow class="fill-granite-light" />
             </template>
@@ -75,8 +77,7 @@
               {{ getMargin() }}
             &gt;
 
-            {{ getInputIcon() }}
-
+          {{ getInputIcon() }}
             &lt;/BIMDataInput&gt;
           </pre>
         </template>
@@ -113,6 +114,8 @@
         </BIMDataText>
         <BIMDataTable :columns="slotsData[0]" :rows="slotsData.slice(1)" />
       </div>
+
+      <InputOutlined />
     </div>
   </main>
 </template>
@@ -123,10 +126,12 @@ import propsData from "./props-data.js";
 import slotsData from "./slots-data.js";
 // Components
 import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
+import InputOutlined from "./InputOutlined.vue";
 
 export default {
   components: {
     ComponentCode,
+    InputOutlined,
   },
   data() {
     return {
@@ -165,18 +170,10 @@ export default {
       }
     },
     getLoading() {
-      if (this.loading) {
-        return true;
-      } else {
-        return false;
-      }
+      return this.loading;
     },
     getDisabled() {
-      if (this.disabled) {
-        return true;
-      } else {
-        return false;
-      }
+      return this.disabled;
     },
     getInputIcon() {
       if (this.inputIcon) {
diff --git a/src/web/views/Components/Input/InputOutlined.vue b/src/web/views/Components/Input/InputOutlined.vue
new file mode 100644
index 00000000..1dc3c214
--- /dev/null
+++ b/src/web/views/Components/Input/InputOutlined.vue
@@ -0,0 +1,272 @@
+<template>
+  <div>
+    <h2>Outlined Input</h2>
+    <ComponentCode :componentTitle="$route.name" language="javascript">
+      <template #module>
+        <BIMDataInputOutlined
+          v-model="textInput"
+          placeholder="Your placeholder here"
+          :error="error"
+          :success="success"
+          :errorMessage="getErrorMessage()"
+          :successMessage="getSuccessMessage()"
+          :loading="getLoading()"
+          :disabled="getDisabled()"
+          :margin="marginInput"
+          :type="inputTypeSelection"
+          :counter="counter"
+          :label="label"
+        >
+          <template #prefixInner v-if="prefixInner">
+            <BIMDataIconShow class="fill-granite-light" margin="0 6px 0 0" />
+          </template>
+          <template #prefix v-if="prefix">
+            <BIMDataIconShow class="fill-granite-light" margin="0 6px 0 0" />
+          </template>
+          <template #suffixInner v-if="suffixInner">
+            <BIMDataIconShow v-if="error" class="fill-high" />
+            <BIMDataIconShow v-else class="fill-granite-light" />
+          </template>
+          <template #suffix v-if="suffix">
+            <BIMDataIconShow class="fill-granite-light" margin="0 0 0 6px" />
+          </template>
+        </BIMDataInputOutlined>
+      </template>
+
+      <template #parameters>
+        <BIMDataCheckbox text="Add a label" v-model="label" />
+        <BIMDataCheckbox text="Add counter" v-model="counter" />
+        <BIMDataCheckbox
+          text="error"
+          v-model="error"
+          :disabled="success || successMessage"
+        />
+        <BIMDataCheckbox
+          text="success"
+          v-model="success"
+          :disabled="error || errorMessage"
+        />
+        <BIMDataCheckbox
+          text="error message"
+          v-model="errorMessage"
+          :disabled="success || successMessage"
+        />
+        <BIMDataCheckbox
+          text="success message"
+          v-model="successMessage"
+          :disabled="error || errorMessage"
+        />
+        <BIMDataCheckbox text="loading" v-model="loading" />
+        <BIMDataCheckbox text="disabled" v-model="disabled" />
+
+        <div class="m-t-24">
+          <BIMDataSelect
+            width="200px"
+            label="Input Type"
+            :options="inputTypeOptions"
+            v-model="inputTypeSelection"
+          >
+          </BIMDataSelect>
+        </div>
+
+        <div>
+          <BIMDataText
+            component="h5"
+            color="color-primary"
+            margin="15px 0 10px"
+          >
+            Slots
+          </BIMDataText>
+          <BIMDataCheckbox text="prefix" v-model="prefix" />
+          <BIMDataCheckbox text="prefixInner" v-model="prefixInner" />
+          <BIMDataCheckbox text="suffixInner" v-model="suffixInner" />
+          <BIMDataCheckbox text="suffix" v-model="suffix" />
+        </div>
+
+        <div>
+          <BIMDataText
+            component="h5"
+            color="color-primary"
+            margin="15px 0 10px"
+          >
+            Margin
+          </BIMDataText>
+          <BIMDataInput v-model="marginInput" placeholder="Change margin" />
+        </div>
+      </template>
+
+      <template #import>
+        {{ getImportContent() }}
+      </template>
+
+      <template #code>
+        <pre>
+            &lt;BIMDataInputOutlined
+              v-model="textInput"
+              placeholder="Your placeholder here"
+              {{ error ? ':error="true"' : "" }}
+              {{ errorMessage ? 'errorMessage="your error message here"' : "" }}
+              {{ success ? ':success="true"' : "" }}
+              {{
+            successMessage ? 'successMessage="your success message here"' : ""
+          }}
+              {{ loading ? ':loading="true"' : "" }}
+              {{ disabled ? ':disabled="true"' : "" }}
+              {{ getMargin() }}
+            &gt;
+
+            {{ getPrefixSlot() }}
+            {{ getPrefixInnerSlot() }}
+            {{ getSuffixInnerSlot() }}
+            {{ getSuffixSlot() }}
+
+
+            &lt;/BIMDataInputOutlined&gt;
+          </pre
+        >
+      </template>
+    </ComponentCode>
+    <div class="m-t-12">
+      <BIMDataText component="h5" color="color-primary" margin="15px 0 0">
+        Props:
+      </BIMDataText>
+      <BIMDataTable :columns="propsData[0]" :rows="propsData.slice(1)" />
+      <BIMDataText component="h5" color="color-primary" margin="15px 0 0">
+        nota bene:
+      </BIMDataText>
+      <BIMDataText component="span" color="color-primary" margin="15px 5px">
+        This component use the $attrs attribute provided by Vue. Therefore all
+        native attribute of this tag are workable.
+        <a
+          href="https://vuejs.org/v2/guide/components-props.html#Disabling-Attribute-Inheritance"
+          target="_blank"
+        >
+          More info about $attrs
+        </a>
+      </BIMDataText>
+    </div>
+    <div class="m-t-12">
+      <BIMDataText component="h5" color="color-primary" margin="15px 0 0">
+        Events:
+      </BIMDataText>
+      <BIMDataTable :columns="eventsData[0]" :rows="eventsData.slice(1)" />
+    </div>
+    <div class="m-t-12">
+      <BIMDataText component="h5" color="color-primary" margin="15px 0 0">
+        Slots:
+      </BIMDataText>
+      <BIMDataTable :columns="slotsData[0]" :rows="slotsData.slice(1)" />
+    </div>
+  </div>
+</template>
+
+<script>
+import eventsData from "./events-data.js";
+import propsData from "./props-outlined-input.js";
+import slotsData from "./slots-outlined-input.js";
+// Components
+import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
+
+export default {
+  components: {
+    ComponentCode,
+  },
+  data() {
+    return {
+      textInput: "",
+      error: false,
+      success: false,
+      errorMessage: false,
+      successMessage: false,
+      loading: false,
+      label: false,
+      disabled: false,
+      counter: true,
+      inputIcon: false,
+      prefix: false,
+      prefixInner: false,
+      suffix: false,
+      suffixInner: false,
+      marginInput: "12px 0px",
+      propsData,
+      eventsData,
+      slotsData,
+      inputTypeOptions: [
+        "text",
+        "password",
+        "number",
+        "file",
+        "url",
+        "time",
+        "email",
+        "tel",
+      ],
+      inputTypeSelection: "text",
+    };
+  },
+  methods: {
+    getImportContent() {
+      return `
+        import BIMDataInput from "@bimdata/design-system/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue";
+        ${
+          this.inputIcon
+            ? 'import BIMDataIconShow from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconShow.vue";'
+            : ""
+        }`;
+    },
+    getErrorMessage() {
+      if (this.error && this.errorMessage) {
+        return "your error message here";
+      }
+    },
+    getSuccessMessage() {
+      if (this.success && this.successMessage) {
+        return "your success message here";
+      }
+    },
+    getLoading() {
+      return this.loading;
+    },
+    getDisabled() {
+      return this.disabled;
+    },
+    getPrefixSlot() {
+      if (this.prefix) {
+        return `
+        <template #prefix>
+          <BIMDataIconShow class="fill-granite-light" margin="0 6px 0 0" />
+        </template>`;
+      }
+    },
+    getPrefixInnerSlot() {
+      if (this.prefixInner) {
+        return `
+        <template #prefixInner>
+          <BIMDataIconShow class="fill-granite-light" margin="0 6px 0 0" />
+        </template>`;
+      }
+    },
+    getSuffixSlot() {
+      if (this.suffix) {
+        return `
+        <template #suffix>
+          <BIMDataIconShow class="fill-granite-light" margin="0 6px 0 0" />
+        </template>`;
+      }
+    },
+    getSuffixInnerSlot() {
+      if (this.suffixInner) {
+        return `
+        <template #suffixInner>
+          <BIMDataIconShow class="fill-granite-light" margin="0 6px 0 0" />
+        </template>`;
+      }
+    },
+    getMargin() {
+      if (this.marginInput != "12px 0px") {
+        return `margin="${this.marginInput}"`;
+      }
+    },
+  },
+};
+</script>
diff --git a/src/web/views/Components/Input/events-data.js b/src/web/views/Components/Input/events-data.js
index 037d022f..771522f0 100644
--- a/src/web/views/Components/Input/events-data.js
+++ b/src/web/views/Components/Input/events-data.js
@@ -1,10 +1,9 @@
 /* eslint-disable */
 export default [
   [ "Event name", "Payload" ],
-  [ "update:modelValue", "The input value." ],
   [ "blur", "The native blur event." ],
-  [ "keypress", "The native keypress event." ],
+  [ "change", "To catch the Event object"],
   [ "focus", "The native focus event." ],
-  ["change", "To catch the Event object"],
-
+  [ "keypress", "The native keypress event." ],
+  [ "update:modelValue", "The input value." ],
 ];
diff --git a/src/web/views/Components/Input/props-data.js b/src/web/views/Components/Input/props-data.js
index 237533aa..1e802373 100644
--- a/src/web/views/Components/Input/props-data.js
+++ b/src/web/views/Components/Input/props-data.js
@@ -1,24 +1,6 @@
 /* eslint-disable */
 export default [
   [ "Props", "Type", "Default value", "Description" ],
-  [
-    "modelValue",
-    "String",
-    "",
-    "Use this prop to bind the input value to a variable.",
-  ],
-  [
-    "margin",
-    "String",
-    "12px 0",
-    "Custom input margins",
-  ],
-  [
-    "placeholder",
-    "String",
-    "' '",
-    "Use this props to add a placeholder to your input.",
-  ],
   [
     "autocomplete",
     "Boolean",
@@ -32,33 +14,51 @@ export default [
     "Use this boolean to disabled your input.",
   ],
   [
-    "loading",
+    "error",
     "Boolean",
     "false",
-    "",
+    "Use this boolean to check if your input is incorrect.",
   ],
   [
-    "success",
+    "errorMessage",
+    "String",
+    "' '",
+    "Use this props to add an error message to your input.",
+  ],
+  [
+    "loading",
     "Boolean",
     "false",
-    "Use this boolean to check if your input is good.",
+    "",
   ],
   [
-    "successMessage",
+    "margin",
+    "String",
+    "12px 0",
+    "Custom input margins",
+  ],
+  [
+    "modelValue",
+    "String",
+    "",
+    "Use this prop to bind the input value to a variable.",
+  ],
+  [
+    "placeholder",
     "String",
     "' '",
-    "Use this props to add a success message to your input.",
+    "Use this props to add a placeholder to your input.",
   ],
   [
-    "error",
+    "success",
     "Boolean",
     "false",
-    "Use this boolean to check if your input is bad.",
+    "Use this boolean to check if your input is correct.",
   ],
   [
-    "errorMessage",
+    "successMessage",
     "String",
     "' '",
-    "Use this props to add an error message to your input.",
+    "Use this props to add a success message to your input.",
   ],
 ];
diff --git a/src/web/views/Components/Input/props-outlined-input.js b/src/web/views/Components/Input/props-outlined-input.js
new file mode 100644
index 00000000..a96b6dc8
--- /dev/null
+++ b/src/web/views/Components/Input/props-outlined-input.js
@@ -0,0 +1,94 @@
+/* eslint-disable */
+export default [
+  [ "Props", "Type", "Default value", "Description"],
+  [
+    "autocomplete",
+    "Boolean",
+    "false",
+    "Whether 'autocomplete' attribute is 'on' or 'off'."
+  ],
+  [
+    "counter",
+    "Boolean",
+    "false",
+    "Specifies whether the input should have a counter at the bottom.",
+  ],
+  [
+    "disabled",
+    "Boolean",
+    "false",
+    "Use this boolean to disabled your input.",
+  ],
+  [
+    "error",
+    "Boolean",
+    "false",
+    "Use this boolean to check if your input is incorrect.",
+  ],
+  [
+    "errorMessage",
+    "String",
+    "' '",
+    "Use this props to add an error message to your input.",
+  ],
+  [
+    "inputType",
+    "String",
+    "'text'",
+    "Will be used as the type attribute of the input element among the following possibilities : 'email', 'file', 'password', 'number', 'text', 'tel', 'time', 'url'.",
+  ],
+  [
+    "label",
+    "Boolean",
+    "false",
+    "Add a label above the input field.",
+  ],
+  [
+    "loading",
+    "Boolean",
+    "false",
+    "",
+  ],
+  [
+    "margin",
+    "String",
+    "12px 0",
+    "Custom input margins.",
+  ],
+  [
+    "maxLength",
+    "Number",
+    "100",
+    "Specifies maximum length of input.",
+  ],
+  [
+    "modelValue",
+    "String",
+    "",
+    "Use this prop to bind the input value to a variable.",
+  ],
+  [
+    "placeholder",
+    "String",
+    "' '",
+    "Use this props to add a placeholder to your input.",
+  ],
+  [
+    "success",
+    "Boolean",
+    "false",
+    "Use this boolean to check if your input is correct.",
+  ],
+  [
+    "successMessage",
+    "String",
+    "' '",
+    "Use this props to add a success message to your input.",
+  ],
+  [
+    "width",
+    "String",
+    "'250px'",
+    "Use this props to custom input width.",
+  ],
+];
diff --git a/src/web/views/Components/Input/slots-outlined-input.js b/src/web/views/Components/Input/slots-outlined-input.js
new file mode 100644
index 00000000..52d95216
--- /dev/null
+++ b/src/web/views/Components/Input/slots-outlined-input.js
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default [
+  [ "Slot name", "Description" ],
+  [ "label", "Use this slot to add a label." ],
+  [ "prefix", "Use this slot for pass custom elements in front of outer input, such as is icons etc." ],
+  [ "prefixInner", "Use this slot for pass custom elements in front of inner input, such as is icons etc." ],
+  [ "suffixInner", "Use this slot for pass custom elements behind inner input, such as is icons etc." ],
+  [ "suffix", "Use this slot for pass custom elements behind outer input, such as is icons etc." ],
+
+];