Warp Design System

Appearance

Switch - Elements ​

The Switch component allows users to toggle between two states.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Accessibility ​

The internal control is rendered as a native button with role="switch" and aria-checked / aria-disabled.

Usage ​

<w-switch> is a form-associated toggle component.

  • It reflects its name, value, checked, and disabled properties to attributes.
  • It dispatches a bubbling change CustomEvent when toggled (when not disabled).
  • When used in a form, the control submits value only when checked is true (otherwise it submits nothing).

Examples ​

html
<w-switch id="demo-switch" name="marketing" value="yes"></w-switch>

<script>
  const el = document.querySelector('#demo-switch');
  el.addEventListener('change', (event) => {
    // event.detail = { checked: boolean, value: string | null }
    console.log('changed', event.detail);
  });
</script>

Styling API ​

<w-switch> API ​

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

Properties ​

NameTypeDefaultSummary
checkedbooleanfalseWhether the switch is on (checked).
disabledbooleanfalseWhether the switch is disabled.
namestring-Name used when submitting an HTML form.
valuestring-Value submitted when the switch is checked.

Property Details ​

checked ​

Whether the switch is on (checked).

  • Type: boolean
  • Default: false

disabled ​

Whether the switch is disabled.

  • Type: boolean
  • Default: false

name ​

Name used when submitting an HTML form.

  • Type: string
  • Default: -

value ​

Value submitted when the switch is checked.

The component reports null as the value in the change event when value is an empty string.

  • Type: string
  • Default: -

Events ​

change ​

Dispatched when the switch toggles. Includes boolean checked and string/null value on details.

  • Type: WarpSwitchChangeEvent

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system