Components as props in labels

docs/components_page/components/input.md

@@ -108,6 +108,13 @@ If you need more granular control over checkboxes and radio buttons, you can als
 
 {{example:components/input/radio_check_standalone.py:standalone_radio_check}}
 
+## Components in labels
+
+You can include components in labels for `Checklist`, `RadioItems`, `Checkbox`, `RadioButton`, and  `Switch`.
+
+{{example:components/input/components_in_labels.py:components_in_labels}}
+
+
 ## 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.

docs/components_page/components/input/components_in_labels.py

@@ -0,0 +1,31 @@
+from dash import Dash, html
+import dash_bootstrap_components as dbc
+
+flights = html.Div([html.Div(className="fa fa-plane pe-1"), "Flights"])
+car = html.Div([html.Div(className="fa fa-car pe-1"), "Rental Car"])
+hotel = html.Div([html.Div(className="fa fa-hotel pe-1"), "Hotel"])
+
+radioitems = html.Div(
+    [
+        dbc.Label("Booking"),
+        dbc.RadioItems(
+            options=[
+                {"label": flights, "value": 1},
+                {"label": car, "value": 2},
+                {"label": hotel, "value": 3},
+            ],
+            value=1,
+            id="radioitems-input",
+        ),
+    ]
+)
+
+checkbox = dbc.Checkbox(
+    id="standalone-checkbox",
+    label=html.Div(
+        ["I agree to the ", html.A("Terms and Conditions", href="#")]
+    ),
+    value=False,
+)
+
+components_in_labels = html.Div([radioitems, html.Hr(), checkbox])

src/components/input/Checkbox.js

@@ -125,7 +125,7 @@ Checkbox.propTypes = {
   /**
    * The label of the <input> element
    */
-  label: PropTypes.string,
+  label: PropTypes.node,
 
   /**
    * The id of the label

src/components/input/Checklist.js

@@ -190,8 +190,7 @@ Checklist.propTypes = {
         /**
          * The checkbox's label
          */
-        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-          .isRequired,
+        label: PropTypes.node.isRequired,
 
         /**
          * The value of the checkbox. This value corresponds to the items

src/components/input/RadioButton.js

@@ -126,7 +126,7 @@ RadioButton.propTypes = {
   /**
    * The label of the <input> element
    */
-  label: PropTypes.string,
+  label: PropTypes.node,
 
   /**
    * The id of the label

src/components/input/RadioItems.js

@@ -184,8 +184,7 @@ RadioItems.propTypes = {
         /**
          * The radio item's label
          */
-        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-          .isRequired,
+        label: PropTypes.node.isRequired,
 
         /**
          * The value of the radio item. This value corresponds to the items

src/components/input/Switch.js

@@ -125,7 +125,7 @@ Switch.propTypes = {
   /**
    * The label of the <input> element
    */
-  label: PropTypes.string,
+  label: PropTypes.node,
 
   /**
    * The id of the label

tests/test_components_as_props

@@ -0,0 +1,40 @@
+from dash import Dash, dcc, html
+from dash_bootstrap_components import Checklist, Checkbox, RadioButton, RadioItems, Switch
+
+
+def test_mdcap001_components_as_props(dash_dcc):
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            dbc.Checklist(
+                [
+                    {"label": html.H2("H2 label"), "value": "h2"},
+                    {"label": html.A("Link in checklist", href="#"), "value": "a"},
+                ],
+                id="checklist",
+            ),
+            dbc.RadioItems(
+                [
+                    {"label": html.H3("on"), "value": "on"},
+                    {"label": html.P("off"), "value": "off"},
+                ],
+                id="radio-items",
+            ),
+            dbc.Checkbox(label= html.H4("h4"), value= "h4", id="checkbox"),
+            dbc.RadioButton(label=html.H6("h6"), value="h6", id="radiobutton),
+            dbc.Switch(label=html.H5("h5"), value="h5", id="switch)
+        ]
+    )
+
+    dash_dcc.start_server(app)
+
+    dash_dcc.wait_for_text_to_equal("#checklist h2", "H2 label")
+    dash_dcc.wait_for_text_to_equal("#checklist a", "Link in checklist")
+
+    dash_dcc.wait_for_text_to_equal("#radio-items h3", "on")
+    dash_dcc.wait_for_text_to_equal("#radio-items p", "off")
+
+    dash_dcc.wait_for_text_to_equal("#checkbox h4", "h4")
+    dash_dcc.wait_for_text_to_equal("#radiobutton h6", "h6")
+    dash_dcc.wait_for_text_to_equal(#switch h5", "h5")