Switch - Usage

The Switch component allows users to toggle between two states.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Elements

AndroidElementsiOSReactVue

Example theme:

DBA lightFinn lightTori lightBlocket lightNeutral lightVend lightDBA darkFinn darkTori darkBlocket darkNeutral darkVend dark

Usage Notes

<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).

Example

<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>

Props

Optional Props

Name	Type	Default	Description
name	string		Name used when submitting an HTML form.
value	string		Value submitted when the switch is checked.
checked	boolean	false	Whether the switch is on (checked).
disabled	boolean	false	Whether the switch is disabled.

Events

Name	Description
change	(event: CustomEvent) => void

Name (name)

Name used when submitting an HTML form.

Default: ''

<form>
  <w-switch name="notifications" value="on"></w-switch>
  <button type="submit">Submit</button>
</form>

Value (value)

Value submitted when the switch is checked.

Default: ''

Notes:

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

<w-switch value="enabled"></w-switch>

Checked (checked)

Whether the switch is on (checked).

Default: false

<w-switch checked></w-switch>

Disabled (disabled)

Whether the switch is disabled.

Default: false

<w-switch disabled></w-switch>
<w-switch checked disabled></w-switch>

Events

Change (change)

Dispatched when the switch toggles (only when not disabled).

• Type: CustomEvent
• Bubbles: true
• Composed: true
• Detail: { checked: boolean; value: string | null }

<w-switch id="switch-events" value="yes"></w-switch>
<script>
  const el = document.querySelector('#switch-events');
  el.addEventListener('change', (e) => {
    console.log('checked:', e.detail.checked);
    console.log('value:', e.detail.value);
  });
</script>

Accessibility

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