Boolean Switch Examples and Reference

Default Boolean Switch

An example of a default boolean switch without any extra properties.

using Dash
using DashDaq

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash(external_stylesheets=external_stylesheets)

app.layout = html_div([
    daq_booleanswitch(
        id="my-boolean-switch",
        on=false
    ),
    html_div(id="boolean-switch-output")
])


callback!(app,
    Output("boolean-switch-output", "children"),
    [Input("my-boolean-switch", "on")]) do on
    return "The switch is $on"
end

run_server(app, "0.0.0.0", debug=true)

Color

Set the color of the boolean switch with color=#<hex_value>.

using Dash
using DashDaq

app = dash()

app.layout = daq_booleanswitch(
  on=true,
  color="#9B51E0",
)  

run_server(app, "0.0.0.0", debug=true)

Label

Set the label and label position using the label and labelPosition
properties.

using Dash
using DashDaq

app = dash()

app.layout = daq_booleanswitch(
  on=true,
  label="Label",
  labelPosition="top"
)  

run_server(app, "0.0.0.0", debug=true)

Vertical Switch

Create a vertical oriented switch by setting vertical=true.

using Dash
using DashDaq

app = dash()

app.layout = daq_booleanswitch(
  on=true,
  label="Vertical",
  vertical=true
)  

run_server(app, "0.0.0.0", debug=true)

Disabled Switch

To disable the Boolean Switch set the property disabled to true.

using Dash
using DashDaq

app = dash()

app.layout = daq_booleanswitch(
  disabled=true,
  label="Disabled",
  labelPosition="bottom"
)  
run_server(app, "0.0.0.0", debug=true)

BooleanSwitch Properties

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.

id (String; optional):
The ID used to identify this component in Dash callbacks.

on (Bool; default false):
Whether or not the switch is on.

color (String; optional):
Color to highlight active switch background.

vertical (Bool; default false):
If true, switch will be vertical instead of horizontal.

disabled (Bool; optional):
If true, switch cannot be clicked.

theme (Dict; default light):
Theme configuration to be set by a ThemeProvider.

label (Dict; optional):
Description to be displayed alongside the control. To control styling,
pass an object with label and style properties.

label is a String | Dict with keys:

label (String; optional)
style (Dict; optional)

labelPosition (a value equal to: ‘top’ or ‘bottom’; default 'top'):
Where the component label is positioned.

className (String; optional):
Class to apply to the root component element.

style (Dict; optional):
Style to apply to the root object.

persistence (Bool | String | Real; optional):
Used to allow user interactions in this component to be persisted when
the component - or the page - is refreshed. If persisted is truthy
and hasn’t changed from its previous value, a value that the user
has changed while using the app will keep that change, as long as the
new value also matches what was given originally. Used in
conjunction with persistence_type.

persisted_props (Array of values equal to: ‘on’; default ['on']):
Properties whose user interactions will persist after refreshing the
component or the page. Since only on is allowed this prop can
normally be ignored.

persistence_type (a value equal to: ‘local’, ‘session’ or ‘memory’; default 'local'):
Where persisted user changes will be stored: memory: only kept in
memory, reset on page refresh. local: window.localStorage, data is
kept after the browser quit. session: window.sessionStorage, data is
cleared once the browser quit.

size (Real; optional):
size of the switch.