Added colorpicker example to docs

Author: ann-marie-ward

docs/components_page/components/input.md

@@ -92,6 +92,15 @@ If you need more granular control over checkboxes and radio buttons, you can als
 
 {{example:components/input/radio_check_standalone.py:standalone_radio_check}}
 
+## Color picker
+
+When using `Input` with `type="color"`, the user may specify a color, either by using a visual color picker or by entering the color in a text field in #rrggbb format.
+
+Note that the color picker presentation may vary substantially from one browser and/or platform to another.
+
+{{example:components/input/colorpicker.py:colorpicker}}
+
+
 {{apidoc:src/components/input/Input.js}}
 
 {{apidoc:src/components/input/Textarea.js}}

docs/components_page/components/input/colorpicker.py

@@ -0,0 +1,23 @@
+
+import dash_html_components as html
+from dash.dependencies import Input, Output
+import dash_bootstrap_components as dbc
+
+colorpicker = dbc.FormGroup(
+    [
+        dbc.Label("Choose the text color:", id='label'),
+        dbc.Input(
+            type="color",
+            id="colorpicker",
+            value="#000000",
+            style={"width": 75, "height": 50},
+        ),
+    ]
+)
+
+
+@app.callback(
+    Output("label", "style"), Input("colorpicker", "value"),
+)
+def update_text(color):
+    return {"color": color}