Switch

Switch provides "on" and "off" choices and can be useful for opt-in and additive actions.

Overview

Switches should be used for boolean and "on" and "off" choices. They should not be for binary choices such as "1 or 2", "blue or red", "sky or ground", "miles or kilometers", "large or small", etc.

For "yes" and "no" interactions, multiple selections, and interactions where a choice is optional, please consider Checkbox.

For single choice interactions, please consider Radio Button or Segmented Control.

Usage

  • Dark mode switch
  • Layer visibility

Sample

2 samples
1
<calcite-switch></calcite-switch>
v3.0.3

Best practices

Below are important guidelines on using the Switch component.

Correct Switch decision
Do use Switches to indicate a boolean or reciprocal relationship
Avoid Switch decision
Avoid using Switches to indicate a choice between similar options

Accessibility

Switch should include a label property value, or be accompanied by a Label, which provides context of the intent to support assistive technologies.

Keyboard navigation

KeyFunction
TabMoves focus in or out of component.
Tab and ShiftMove focus in or out of component.
EnterToggles the component.
SpaceToggles the component.

Writing and copy

Keep labels for Switches succinct. Do not use contractions such as "you're", "aren't", "can't", and "haven't" for Switch labels in order to reduce confusion. Avoid writing Switch text as a question.

A label for a Switch should be supporting "On" as additive, not subtractive. For example:

  • Show layer
  • Enable editing
  • Allow credit usage
  • Display controls
  • Update automatically

API reference

Properties

PropertyAttributeDescriptionTypeDefault
checkedcheckedWhen true, the component is checked.booleanfalse
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
formformThe id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.string
labellabelAccessible name for the component.string
namenameSpecifies the name of the component. Required to pass the component's value on form submission.string
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
valuevalueThe component's value.any

Styles

NameDescription
--calcite-switch-background-colorSpecifies the component's background color.
--calcite-switch-border-colorSpecifies the component's border color.
--calcite-switch-corner-radiusSpecifies the component's corner radius.
--calcite-switch-handle-background-colorSpecifies the handle's background color.
--calcite-switch-handle-border-colorSpecifies the handle's border color.
--calcite-switch-handle-shadowSpecifies the handle's shadow.

Events

NameDescriptionBehavior
calciteSwitchChangeFires when the checked value has changed.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close