diff --git a/dash_bootstrap_components/icons.py b/dash_bootstrap_components/icons.py
index 3390eff15..6d58149bc 100644
--- a/dash_bootstrap_components/icons.py
+++ b/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"
diff --git a/docs/components_page/components/input.md b/docs/components_page/components/input.md
index e598e660c..0fbd2e812 100644
--- a/docs/components_page/components/input.md
+++ b/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.
diff --git a/docs/components_page/components/input/components_in_labels.py b/docs/components_page/components/input/components_in_labels.py
new file mode 100644
index 000000000..09afd71ef
--- /dev/null
+++ b/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])
diff --git a/docs/templates/partials/head.html b/docs/templates/partials/head.html
index 3c88c7298..feec95145 100644
--- a/docs/templates/partials/head.html
+++ b/docs/templates/partials/head.html
@@ -17,5 +17,5 @@
/>
diff --git a/noxfile.py b/noxfile.py
index aef71f26d..8c3b0a442 100644
--- a/noxfile.py
+++ b/noxfile.py
@@ -6,6 +6,7 @@
"dash_bootstrap_components",
"docs",
"examples",
+ "tests",
"noxfile.py",
"tasks.py",
]
diff --git a/src/components/input/Checkbox.js b/src/components/input/Checkbox.js
index 2f603a47a..55994e067 100644
--- a/src/components/input/Checkbox.js
+++ b/src/components/input/Checkbox.js
@@ -125,7 +125,7 @@ Checkbox.propTypes = {
/**
* The label of the element
*/
- label: PropTypes.string,
+ label: PropTypes.node,
/**
* The id of the label
diff --git a/src/components/input/Checklist.js b/src/components/input/Checklist.js
index 269e53233..e147dc053 100644
--- a/src/components/input/Checklist.js
+++ b/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
diff --git a/src/components/input/RadioButton.js b/src/components/input/RadioButton.js
index 0c1d1efad..6db699765 100644
--- a/src/components/input/RadioButton.js
+++ b/src/components/input/RadioButton.js
@@ -126,7 +126,7 @@ RadioButton.propTypes = {
/**
* The label of the element
*/
- label: PropTypes.string,
+ label: PropTypes.node,
/**
* The id of the label
diff --git a/src/components/input/RadioItems.js b/src/components/input/RadioItems.js
index fb1f8c390..549405939 100644
--- a/src/components/input/RadioItems.js
+++ b/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
diff --git a/src/components/input/Switch.js b/src/components/input/Switch.js
index 9c9f3eeae..040108cf4 100644
--- a/src/components/input/Switch.js
+++ b/src/components/input/Switch.js
@@ -125,7 +125,7 @@ Switch.propTypes = {
/**
* The label of the element
*/
- label: PropTypes.string,
+ label: PropTypes.node,
/**
* The id of the label
diff --git a/tests/test_components_as_props.py b/tests/test_components_as_props.py
new file mode 100644
index 000000000..3ac2802e4
--- /dev/null
+++ b/tests/test_components_as_props.py
@@ -0,0 +1,43 @@
+import dash_bootstrap_components as dbc
+from dash import Dash, html
+
+
+def test_mdcap001_components_as_props(dash_duo):
+ 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_duo.start_server(app)
+
+ dash_duo.wait_for_text_to_equal("#checklist h2", "H2 label")
+ dash_duo.wait_for_text_to_equal("#checklist a", "Link in checklist")
+
+ dash_duo.wait_for_text_to_equal("#radio-items h3", "on")
+ dash_duo.wait_for_text_to_equal("#radio-items p", "off")
+
+ dash_duo.wait_for_text_to_equal("#checkbox+label", "h4")
+ dash_duo.wait_for_text_to_equal("#radiobutton+label", "h6")
+ dash_duo.wait_for_text_to_equal("#switch+label", "h5")
diff --git a/tests/test_navlink.py b/tests/test_navlink.py
index 3118cda61..0a1c10f93 100644
--- a/tests/test_navlink.py
+++ b/tests/test_navlink.py
@@ -1,9 +1,8 @@
-from dash import Dash
+from dash import Dash, dcc, html
from dash.dependencies import Input, Output
from dash_bootstrap_components import NavLink
-from dash import dcc, html
-from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.by import By
+from selenium.webdriver.support.wait import WebDriverWait
def test_dbnl001_auto_active(dash_duo):
diff --git a/tests/test_popover.py b/tests/test_popover.py
index 81e565121..5a8bcdda8 100644
--- a/tests/test_popover.py
+++ b/tests/test_popover.py
@@ -1,3 +1,4 @@
+import dash.testing.wait as wait
from dash import Dash, html
from dash_bootstrap_components import (
Popover,
@@ -5,7 +6,6 @@
PopoverHeader,
themes,
)
-import dash.testing.wait as wait
from selenium.webdriver.common.action_chains import ActionChains