Skip to main content

Toggle switch

Supported products
  • Central CMS
  • Central Forms
  • Central Connect

An alternative presentation for a checkbox, providing a more obvious visual indication of the on/off state.

Basic usage

{{
form.toggle_switch({
'label': 'Turn me on?',
'id': 'guid-' ~ random(),
'name': 'toggle'
})
}}

Helper options

You can configure this helper using the common helper options. The following options are specific to this helper.

OptionTypeDescription
checkedbooleanWhether the input should be checked
indeterminatebooleanNeither on nor off, shows the toggle in the middle of the options

States

Checked

{{
form.toggle_switch({
'label': 'Checked toggle',
'checked': true,
'id': 'guid-' ~ random(),
'name': 'toggle-checked'
})
}}

Indeterminate

info

The indeterminate state can only be set via JavaScript. If you're using toggles in your own components, we'll presume you’re going to manage this.

Screenshot of indeterminate toggle

{{
form.toggle_switch({
'label': 'Indeterminate toggle',
'id': 'toggle-indeterminate',
'name': 'toggle-indeterminate'
})
}}
<!-- example javascript -->
<script type="text/javascript">
var toggle = document.getElementById("toggle-indeterminate");
toggle.indeterminate = true;
</script>

Best practices

Toggle switches should:

  • Be a standalone choice, not grouped together (Use checkboxes or radios instead)
  • Clearly indicate the implications of enabling or disabling the setting (e.g. “Disabling this integration will prevent you from taking payments.”)
  • Inform the user why a toggle switch is disabled. Provide clear steps explaining how to enable the functionality

Content guidelines

Label

Toggle switch labels should:

  • Use active voice/verbs where possible (e.g. Enable, Activate)
  • Use as few words as possible to convey their intent
Do keep the label consistent, to indicate state
Don’t change the label to indicate the action that will be performed

Help text

Do clearly explain the implications of changing this setting
Don’t use help text to indicate state