diff --git a/docs/en/UI/Angular/FormInput-Component.md b/docs/en/UI/Angular/FormInput-Component.md
new file mode 100644
index 0000000000..11b857ddb4
--- /dev/null
+++ b/docs/en/UI/Angular/FormInput-Component.md
@@ -0,0 +1,43 @@
+# Form Input Component
+
+The ABP FormInput Component is a reusable form input component for text type.
+
+It takes `label`, `labelClass` (default form-label), `inputId`,`inputPlaceholder`,`inputReadonly`,`inputClass` (default form-control) and `inputStyle` as input to customize component. Also, it emits `formBlur` and `formFocus` events when component gain or lose focus.
+
+# Usage
+
+ABP FormInput component is a part of the `ThemeSharedModule` module. If you've imported that module into your module, you don't need to import it again. If not, first import it as shown below:
+
+```ts
+// my-feature.module.ts
+
+import { ThemeSharedModule } from "@abp/ng.theme.shared";
+import { FomrInputDemoComponent } from "./FomrInputDemoComponent.component";
+
+@NgModule({
+	imports: [
+		ThemeSharedModule,
+		// ...
+	],
+	declarations: [FomrInputDemoComponent],
+	// ...
+})
+export class MyFeatureModule {}
+```
+
+Then, the `abp-form-input` component can be used. See the example below:
+
+```html
+<div class="row">
+	<div class="col-4">
+		<abp-form-input
+			label="AbpAccount::UserNameOrEmailAddress"
+			inputId="login-input-user-name-or-email-address"
+		></abp-form-input>
+	</div>
+</div>
+```
+
+See the form input result below:
+
+![abp-form-input](./images/form-input.png)
diff --git a/docs/en/UI/Angular/images/form-input.png b/docs/en/UI/Angular/images/form-input.png
new file mode 100644
index 0000000000..73c9cfd74c
Binary files /dev/null and b/docs/en/UI/Angular/images/form-input.png differ