Toggle Switch Examples and Reference


Default Toggle Switch

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

import dash
import dash_daq as daq
import dash_html_components as html

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    daq.ToggleSwitch(
        id='my-toggle-switch',
        value=False
    ),
    html.Div(id='toggle-switch-output')
])

@app.callback(
    dash.dependencies.Output('toggle-switch-output', 'children'),
    [dash.dependencies.Input('my-toggle-switch', 'value')])
def update_output(value):
    return 'The switch is {}.'.format(value)


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

Vertical orientation

Make the switch display vertically by setting vertical=True.

import dash_daq as daq
daq.ToggleSwitch(
    vertical=True
)  

Size

Adjust the size of the toggle switch with size.

import dash_daq as daq
daq.ToggleSwitch(
    size=100
)  

Label

Add a label to the toggle switch and specify its position using label and labelPosition.

import dash_daq as daq
daq.ToggleSwitch(
    label='My toggle switch',
    labelPosition='bottom'
)  

Toggle Switch Properties

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

help(dash_daq.ToggleSwitch)
```

id (string; optional): The ID used to identify this compnent in Dash callbacks

color (string; optional): Color to highlight button/indicator

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

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 has the following type: string | dict containing keys ‘style’, ‘label’. Those keys have the following types:

  • style (dict; optional)
  • label (string; optional) | list of string | dict containing keys ‘style’, ‘label’. Those keys have the following types: - style (dict; optional) - label (string; optional)s

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

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.

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

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.

size (number; optional): The size of the switch

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

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

value (boolean; default False): The state of the switch

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