Toggle Switch Examples and Reference

Default Toggle Switch

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

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

app = dash.Dash(__name__)

app.layout = html.Div([

    Output('my-toggle-switch-output', 'children'),
    Input('my-toggle-switch', 'value')
def update_output(value):
    return 'The switch is {}.'.format(value)

if __name__ == '__main__':

Vertical orientation

Make the switch display vertically by setting vertical=True.

import dash_daq as daq


Adjust the size of the toggle switch with size.

import dash_daq as daq


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

import dash_daq as daq
    label='My toggle switch',

ToggleSwitch Properties

Access this documentation in your Python terminal with:


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 button/indicator.

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:

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

persisted_props (list of values equal to: ‘value’; 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 (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’ 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 (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.