update after review

Author: ann-marie-ward

docs/components_page/components/input.md

@@ -98,6 +98,10 @@ When using `Input` with `type="color"`, the user may specify a color, either by
 
 Note that the color picker presentation may vary substantially from one browser and/or platform to another.
 
+As you drag the selector around the color picker, notice that the text color is smoothly updated.   While this is a nice feature, it may  cause a performance issue in your app, because the callback fires continuously.  
+
+This is a great use-case for a [Dash clientside callback](https://dash.plotly.com/clientside-callbacks).  This example uses a clientside callback so the callback runs directly in the browser instead of making requests to the Dash server.  For your reference, the regular Dash callback is shown as a comment.  
+
 {{example:components/input/colorpicker.py:colorpicker}}
 
 

docs/components_page/components/input/colorpicker.py

@@ -1,10 +1,10 @@
+import dash_bootstrap_components as dbc
 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.Label(["Select a ", html.Span("color", id="color")]),
         dbc.Input(
             type="color",
             id="colorpicker",
@@ -14,9 +14,18 @@
     ]
 )
 
-
-@app.callback(
-    Output("label", "style"), Input("colorpicker", "value"),
+app.clientside_callback(
+    """
+    function(color) {                                      
+        return {"color": color}
+    }
+    """,
+    Output("color", "style"),
+    Input("colorpicker", "value"),
 )
-def update_text(color):
-    return {"color": color}
+
+
+# Regular Dash callback
+# @app.callback(Output("color", "style"), Input("colorpicker", "value"))
+# def update_text(color):
+#     return {"color": color}

setup.cfg

@@ -15,6 +15,7 @@ exclude =
     docs/components_page/components/input/simple.py,
     docs/components_page/components/input/radio_check_standalone.py,
     docs/components_page/components/input/radio_check.py,
+    docs/components_page/components/input/colorpicker.py,
     docs/components_page/components/input_group/button.py,
     docs/components_page/components/input_group/dropdown.py,
     docs/components_page/components/list_group/links.py,