From 8bdbb415b56432ef382800fff72500b23f4ac836 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Fri, 22 Oct 2021 11:02:36 +0000
Subject: [PATCH] [ADD] developer: add page on generic components (js)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes odoo/documentation#1209

Signed-off-by: Géry Debongnie (ged) <ged@openerp.com>
---
 content/developer/reference/javascript.rst    |  1 +
 .../javascript/generic_components.rst         | 47 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 content/developer/reference/javascript/generic_components.rst

diff --git a/content/developer/reference/javascript.rst b/content/developer/reference/javascript.rst
index eb7426972..eacd15c6e 100644
--- a/content/developer/reference/javascript.rst
+++ b/content/developer/reference/javascript.rst
@@ -12,6 +12,7 @@ Javascript
     javascript/owl_component_system
     javascript/registries
     javascript/services
+    javascript/generic_components
     javascript/javascript_cheatsheet
     javascript/javascript_reference
     javascript/mobile
diff --git a/content/developer/reference/javascript/generic_components.rst b/content/developer/reference/javascript/generic_components.rst
new file mode 100644
index 000000000..9d08a8cc8
--- /dev/null
+++ b/content/developer/reference/javascript/generic_components.rst
@@ -0,0 +1,47 @@
+==================
+Generic Components
+==================
+
+The Odoo web client is built with `Owl <https://github.com/odoo/owl>`_ components.
+To make it easier, the Odoo javascript framework provides a suite of generic
+components that can be reused in some common situations, such as dropdowns,
+checkboxes or datepickers. This page explains how to use these generic components.
+
+CheckBox
+========
+
+Location
+--------
+
+`@web/core/checkbox/checkbox`
+
+Description
+-----------
+
+This is a simple checkbox component with a label next to it. The checkbox is
+linked to the label: the checkbox is toggled whenever the label is clicked.
+
+.. code-block:: xml
+
+  <CheckBox value="boolean" disabled="boolean" t-on-change="onValueChange">
+    Some Text
+  </CheckBox>
+
+Props
+-----
+
+.. list-table::
+    :widths: 20 20 60
+    :header-rows: 1
+
+    * - Name 
+      - Type
+      - Description
+    * - `value`
+      - `boolean`
+      - if true, the checkbox is checked, otherwise it is unchecked
+    * - `disabled`
+      - `boolean`
+      - if true, the checkbox is disabled, otherwise it is enabled
+
+