diff --git a/docs/en/UI/Angular/Checkbox-Component.md b/docs/en/UI/Angular/Checkbox-Component.md new file mode 100644 index 0000000000..e33611e471 --- /dev/null +++ b/docs/en/UI/Angular/Checkbox-Component.md @@ -0,0 +1,39 @@ +# Checkbox Component + +The ABP Checkbox Component is a reusable form input component for checkbox type. + +It takes `label`, `labelClass` (default form-check-label), `checkboxId`,`checkboxReadonly`,`checkboxReadonly` (default form-check-input) and `checkboxStyle` as input to customize component. Also, it emits `checkboxBlur` and `checkboxFocus` events when component gain or lose focus. + +# Usage + +ABP Checkbox 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 { 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 +
+ + +
+``` + +See the checkbox input result below: + +![abp-form-input](./images/form-checkbox.png) diff --git a/docs/en/UI/Angular/images/form-checkbox.png b/docs/en/UI/Angular/images/form-checkbox.png new file mode 100644 index 0000000000..18d064c474 Binary files /dev/null and b/docs/en/UI/Angular/images/form-checkbox.png differ