Merge pull request #16547 from abpframework/fix/16524

Document FormInput and Checkbox components

docs/en/UI/Angular/Card-Component.md

@@ -29,7 +29,7 @@ ABP Card Component is a part of the `ThemeSharedModule` module. If you've import
 // my-feature.module.ts
 
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { CardDemoComponent } from './chart-demo.component';
+import { CardDemoComponent } from './card-demo.component';
 
 @NgModule({
   imports: [

docs/en/UI/Angular/Checkbox-Component.md

@@ -0,0 +1,51 @@
+# Checkbox Component
+
+The ABP Checkbox Component is a reusable form input component for the checkbox type.
+
+# Inputs
+
+-   `label`
+-   `labelClass (default form-check-label)`
+-   `checkboxId`
+-   `checkboxReadonly`
+-   `checkboxReadonly (default form-check-input)`
+-   `checkboxStyle`
+
+# Outputs
+
+-   `checkboxBlur`
+-   `checkboxFocus`
+
+# Usage
+
+The ABP Checkbox component is a part of the `ThemeSharedModule` module. If you've imported that module into your module, there's no need to import it again. If not, then first import it as shown below:
+
+```ts
+// my-feature.module.ts
+
+import { ThemeSharedModule } from "@abp/ng.theme.shared";
+import { CheckboxDemoComponent } from "./CheckboxDemoComponent.component";
+
+@NgModule({
+  imports: [
+    ThemeSharedModule,
+    // ...
+  ],
+  declarations: [CheckboxDemoComponent],
+  // ...
+})
+export class MyFeatureModule {}
+```
+
+Then, the `abp-checkbox` component can be used. See the example below:
+
+```html
+<div class="form-check">
+  <abp-checkbox label="Yes,I Agree" checkboxId="checkbox-input">
+  </abp-checkbox>
+</div>
+```
+
+See the checkbox input result below:
+
+![abp-checkbox](./images/form-checkbox.png)

docs/en/UI/Angular/FormInput-Component.md

@@ -0,0 +1,49 @@
+# Form Input Component
+
+The ABP FormInput Component is a reusable form input component for the text type.
+
+# Inputs
+* `label`
+* `labelClass (default form-label)`
+* `inputPlaceholder`
+* `inputReadonly`
+* `inputClass (default form-control)`
+
+# Outputs
+* `formBlur`
+* `formFocus`
+
+# Usage
+
+The ABP FormInput component is a part of the `ThemeSharedModule` module. If you've imported that module into your module, there's no need to import it again. If not, then first import it as shown below:
+
+```ts
+import { ThemeSharedModule } from "@abp/ng.theme.shared";
+import { FormInputDemoComponent } from "./FomrInputDemoComponent.component";
+
+@NgModule({
+  imports: [
+   ThemeSharedModule,
+   // ...
+  ],
+  declarations: [FormInputDemoComponent],
+})
+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)