Switch

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

Overview

Switches should be used for boolean and on/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/no interactions, multi-select, and interactions where a choice is optional, please consider Checkbox.

For single choice interactions, please consider Radio Button or Radio Group.

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction
Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

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

Keyboard navigation

KeyFunction
TabMove focus in or out of component
Tab and ShiftMove focus in or out of component
EnterToggles switch
SpaceToggles switch

Writing and copy

Keep labels for Switches simple and succinct. Do not use contractions (you're, aren't, can't, 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

calcite-switch
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
checkedchecked

True if the switch is initially on

booleanA boolean property should be present, or not
truefalse
disableddisabled

True if the switch is disabled

booleanA boolean property should be present, or not
truefalse
labellabel

Applies to the aria-label attribute on the switch

optional
stringA custom string
undefined
namename

The name of the switch input

stringA custom string
undefined
scalescale

The scale of the switch

typedChoose from a set of typed values
lm (default)s
switchedswitched
deprecateduse 'checked' instead.

True if the switch is initially on

booleanA boolean property should be present, or not
truefalse
valuevalue

The value of the switch input

typedChoose from a set of typed values
any

Events

NameDescriptionDetail
calciteSwitchChange

Fires when the checked value has changed.

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

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