Toggle Switch Examples and Reference


Default Toggle Switch

An example of a default toggle 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_toggleswitch(
      id="my-toggle-switch",
      value=false
  ),
  html_div(id="toggle-switch-output")
])

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

run_server(app, "0.0.0.0", debug=true)
The switch is False.

Vertical orientation

Make the switch display vertically by setting vertical=true.

using Dash
using DashDaq

app = dash()

app.layout = daq_toggleswitch(
  vertical=true
)  

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

Size

Adjust the size of the toggle switch with size.

using Dash
using DashDaq

app = dash()

app.layout = daq_toggleswitch(
  size=100
)  

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

Label

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

using Dash
using DashDaq

app = dash()

app.layout = daq_toggleswitch(
  label="My toggle switch",
  labelPosition="bottom"
)  

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

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

value (Bool; default false): The state of the switch.

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

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

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) | Array of Strings | Dict with keys:

  • label (String; optional)

  • style (Dict; optional)s

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: '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_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.