Components as props in labels (#940)

Author: AnnMarieW

dash_bootstrap_components/icons.py

@@ -1,5 +1,5 @@
 BOOTSTRAP = (
-    "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/"
+    "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/"
     "font/bootstrap-icons.css"
 )
-FONT_AWESOME = "https://use.fontawesome.com/releases/v6.1.1/css/all.css"
+FONT_AWESOME = "https://use.fontawesome.com/releases/v6.3.0/css/all.css"

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 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+flights = html.Div([html.I(className="bi bi-airplane pe-1"), "Flights"])
+car = html.Div([html.I(className="bi bi-car-front pe-1"), "Rental Car"])
+hotel = html.Div([html.I(className="bi bi-house 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])

docs/templates/partials/head.html

@@ -17,5 +17,5 @@
 />
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
+  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"
 />

noxfile.py

@@ -6,6 +6,7 @@
     "dash_bootstrap_components",
     "docs",
     "examples",
+    "tests",
     "noxfile.py",
     "tasks.py",
 ]

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