Boolean Switch Examples and Reference


Default Boolean Switch

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

import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_daq as daq

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.BooleanSwitch(id='my-boolean-switch', on=False),
    html.Div(id='boolean-switch-output')
])


@app.callback(
    Output('boolean-switch-output', 'children'),
    Input('my-boolean-switch', 'on')
)
def update_output(on):
    return 'The switch is {}.'.format(on)


if __name__ == '__main__':
    app.run_server(debug=True)

Color

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

import dash_daq as daq

daq.BooleanSwitch(
  on=True,
  color="#9B51E0",
)

Label

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

import dash_daq as daq

daq.BooleanSwitch(
  on=True,
  label="Label",
  labelPosition="top"
)

Vertical Switch

Create a vertical oriented switch by setting vertical=True.

import dash_daq as daq

daq.BooleanSwitch(
  on=True,
  label="Vertical",
  vertical=True
)

Disabled Switch

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

import dash_daq as daq

daq.BooleanSwitch(
  disabled=True,
  label="Disabled",
  labelPosition="bottom"
)

Boolean Switch Properties

Access this documentation in your Python terminal with:
```python

help(dash_daq.BooleanSwitch)
```

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 compnent in Dash callbacks.

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

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

disabled (boolean; optional):
If True, switch cannot be clicked.

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’, ‘bottom’; default 'top'):
Where the component label is positioned.

on (boolean; default False):
Whether or not the switch is on.

persisted_props (list of a value equal to: ‘on’s; 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 (boolean | string | number; 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.

persistence_type (a value equal to: ‘local’, ‘session’, ‘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.

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

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

vertical (boolean; default False):
If True, switch will be vertical instead of horizontal.