Skip to content

Commit 0d60f10

Browse files
tcbegleyAnnMarieW
tcbegley
and
AnnMarieW
authored
Add Switch component (#689)
* New Standalone toggle switch updated RadioButton and Checkbox * format * Updated tests * Fix tests Co-authored-by: AnnMarieW <[email protected]>
1 parent 950879d commit 0d60f10

File tree

12 files changed

+730
-207
lines changed

12 files changed

+730
-207
lines changed

‎docs/components_page/components/__tests__/test_input.py‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,57 @@ def check_input_radio_check_callbacks(runner):
6868
== "Radio button 2, 2 checklist items and 2 switches selected.",
6969
timeout=10,
7070
)
71+
72+
73+
# --------------------------------
74+
75+
76+
def test_r_input_radio_check_standalone(dashr):
77+
r_app = load_r_app(
78+
(HERE.parent / "input" / "radio_check_standalone.R"),
79+
"standalone_radio_check",
80+
)
81+
dashr.start_server(r_app)
82+
check_input_radio_check_standalone_callbacks(dashr)
83+
84+
85+
def test_jl_input_radio_check_standalone(dashjl):
86+
jl_app = load_jl_app(
87+
(HERE.parent / "input" / "radio_check_standalone.jl"),
88+
"standalone_radio_check",
89+
)
90+
dashjl.start_server(jl_app)
91+
check_input_radio_check_standalone_callbacks(dashjl)
92+
93+
94+
def check_input_radio_check_standalone_callbacks(runner):
95+
96+
outcome = (
97+
"Selections: Checkbox: {0}, Toggle Switch: {0}, Radio Button: {0}"
98+
)
99+
100+
wait.until(
101+
lambda: runner.find_element("#standalone-radio-check-output").text
102+
== outcome.format(False),
103+
timeout=10,
104+
)
105+
106+
runner.find_element("#standalone-checkbox").click()
107+
runner.find_element("#standalone-switch").click()
108+
runner.find_element("#standalone-radio").click()
109+
110+
wait.until(
111+
lambda: runner.find_element("#standalone-radio-check-output").text
112+
== outcome.format(True),
113+
timeout=10,
114+
)
115+
116+
runner.find_element("#standalone-checkbox").click()
117+
runner.find_element("#standalone-switch").click()
118+
runner.find_element("#standalone-radio").click()
119+
120+
wait.until(
121+
lambda: runner.find_element("#standalone-radio-check-output").text
122+
== outcome.format(False),
123+
timeout=10,
124+
)

‎docs/components_page/components/input.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,9 @@ Use the `input_checked_style`, `inputCheckedClassName`, `label_checked_style` an
7575

7676
{{example:components/input/selected_styles.py:checklist}}
7777

78-
## Standalone checkboxes and radio buttons
78+
## Standalone checkboxes, toggle switches and radio buttons
7979

80-
If you need more granular control over checkboxes and radio buttons, you can also create standalone components. Bind callbacks to the `checked` keyword to react to changes in the input state. To attach a label, wrap the input and a `Label` with a `html.Div` and add the class `form-check`. You can use the label's `html_for` keyword to bind it to the checkbox or radio button.
80+
If you need more granular control over checkboxes and radio buttons, you can also create standalone components. Bind callbacks to the `value` keyword to react to changes in the input state. Bind the `label` to the checkbox, switch or radio button by specifying an `id`.
8181

8282
{{example:components/input/radio_check_standalone.py:standalone_radio_check}}
8383

‎docs/components_page/components/input/radio_check_standalone.R‎

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,22 @@ standalone_radio_check <- htmlDiv(
55
list(
66
htmlDiv(
77
list(
8-
dbcCheckbox(id = "standalone-checkbox"),
9-
dbcLabel(
10-
"This is a checkbox",
11-
html_for = "standalone-checkbox",
12-
check = TRUE
8+
dbcCheckbox(
9+
id = "standalone-checkbox",
10+
label = "This is a checkbox",
11+
value = FALSE
12+
),
13+
dbcSwitch(
14+
id = "standalone-switch",
15+
label = "This is a toggle switch",
16+
value = FALSE
17+
),
18+
dbcRadioButton(
19+
id = "standalone-radio",
20+
label = "This is a radio button",
21+
value = FALSE
1322
)
14-
),
15-
className = "form-check"
16-
),
17-
htmlDiv(
18-
list(
19-
dbcRadioButton(id = "standalone-radio"),
20-
dbcLabel(
21-
"This is a radio button",
22-
html_for = "standalone-radio",
23-
check = TRUE
24-
)
25-
),
26-
className = "form-check"
23+
)
2724
),
2825
htmlP(id = "standalone-radio-check-output")
2926
)
@@ -33,16 +30,20 @@ standalone_radio_check <- htmlDiv(
3330
app$callback(
3431
output("standalone-radio-check-output", "children"),
3532
list(
36-
input("standalone-checkbox", "checked"),
37-
input("standalone-radio", "checked")
33+
input("standalone-checkbox", "value"),
34+
input("standalone-switch", "value"),
35+
input("standalone-radio", "value")
3836
),
39-
function(checkbox_checked, radio_checked) {
40-
if (checkbox_checked & radio_checked) {
41-
return("Both checked.")
42-
} else if (checkbox_checked | radio_checked) {
43-
return("One checked.")
44-
} else {
45-
return("None checked.")
46-
}
37+
function(checkbox_checked, switch_checked, radio_checked) {
38+
check <- if (checkbox_checked) "True" else "False"
39+
switch <- if (switch_checked) "True" else "False"
40+
radio <- if (radio_checked) "True" else "False"
41+
42+
43+
template <- "Selections: Checkbox: %s, Toggle Switch: %s, Radio Button: %s"
44+
45+
return(
46+
sprintf(template, check, switch, radio)
47+
)
4748
}
4849
)

‎docs/components_page/components/input/radio_check_standalone.jl‎

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,40 @@
11
using DashBootstrapComponents, DashHtmlComponents
22

3+
34
standalone_radio_check = html_div([
4-
html_div(
5-
[
6-
dbc_checkbox(id = "standalone-checkbox"),
7-
dbc_label("This is a checkbox", html_for = "standalone-checkbox", check = true),
8-
],
9-
className = "form-check",
10-
),
11-
html_div(
12-
[
13-
dbc_radiobutton(id = "standalone-radio"),
14-
dbc_label(
15-
"This is a radio button",
16-
html_for = "standalone-radio",
17-
check = true,
18-
),
19-
],
20-
className = "form-check",
21-
),
5+
html_div([
6+
dbc_checkbox(
7+
id = "standalone-checkbox",
8+
label = "This is a checkbox",
9+
value = false,
10+
),
11+
dbc_switch(
12+
id = "standalone-switch",
13+
label = "This is a toggle switch",
14+
value = false,
15+
),
16+
dbc_radiobutton(
17+
id = "standalone-radio",
18+
label = "This is a radio button",
19+
value = false,
20+
),
21+
]),
2222
html_p(id = "standalone-radio-check-output"),
2323
]);
2424

2525

2626
callback!(
2727
app,
2828
Output("standalone-radio-check-output", "children"),
29-
Input("standalone-checkbox", "checked"),
30-
Input("standalone-radio", "checked"),
31-
) do checkbox_checked, radio_checked
32-
if checkbox_checked == 1 && radio_checked == 1
33-
return "Both checked."
34-
elseif checkbox_checked == 1 || radio_checked == 1
35-
return "One checked."
36-
else
37-
return "None checked."
38-
end
29+
Input("standalone-checkbox", "value"),
30+
Input("standalone-switch", "value"),
31+
Input("standalone-radio", "value"),
32+
) do checkbox_checked, switch_checked, radio_checked
33+
34+
output_string =
35+
"""Selections: """ *
36+
"""Checkbox: $(checkbox_checked ? "True" : "False"), """ *
37+
"""Toggle Switch: $(switch_checked ? "True" : "False"), """ *
38+
"""Radio Button: $(radio_checked ? "True" : "False")"""
39+
return output_string
3940
end;

‎docs/components_page/components/input/radio_check_standalone.py‎

Lines changed: 19 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,22 @@
55
[
66
html.Div(
77
[
8-
dbc.Checkbox(id="standalone-checkbox"),
9-
dbc.Label(
10-
"This is a checkbox",
11-
html_for="standalone-checkbox",
12-
check=True,
8+
dbc.Checkbox(
9+
id="standalone-checkbox",
10+
label="This is a checkbox",
11+
value=False,
1312
),
14-
],
15-
className="form-check",
16-
),
17-
html.Div(
18-
[
19-
dbc.RadioButton(id="standalone-radio"),
20-
dbc.Label(
21-
"This is a radio button",
22-
html_for="standalone-radio",
23-
check=True,
13+
dbc.Switch(
14+
id="standalone-switch",
15+
label="This is a toggle switch",
16+
value=False,
17+
),
18+
dbc.RadioButton(
19+
id="standalone-radio",
20+
label="This is a radio button",
21+
value=False,
2422
),
25-
],
26-
className="form-check",
23+
]
2724
),
2825
html.P(id="standalone-radio-check-output"),
2926
]
@@ -33,14 +30,10 @@
3330
@app.callback(
3431
Output("standalone-radio-check-output", "children"),
3532
[
36-
Input("standalone-checkbox", "checked"),
37-
Input("standalone-radio", "checked"),
33+
Input("standalone-checkbox", "value"),
34+
Input("standalone-switch", "value"),
35+
Input("standalone-radio", "value"),
3836
],
3937
)
40-
def on_form_change(checkbox_checked, radio_checked):
41-
if checkbox_checked and radio_checked:
42-
return "Both checked."
43-
elif checkbox_checked or radio_checked:
44-
return "One checked."
45-
else:
46-
return "None checked."
38+
def on_form_change(checkbox_checked, switch_checked, radio_checked):
39+
return f"Selections: Checkbox: {checkbox_checked}, Toggle Switch: {switch_checked}, Radio Button: {radio_checked}"

0 commit comments

Comments
 (0)