---
title: Switch
description: Give users a clear way to toggle options on or off.
api_version: 2026-01
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/forms/switch
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/forms/switch.md
---

# Switch

Give users a clear way to toggle options on or off.

## Properties

* **accessibilityLabel**

  **string**

  A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers.

* **checked**

  **boolean**

  **Default: false**

  Whether the control is active.

* **command**

  **'--auto' | '--show' | '--hide' | '--toggle'**

  **Default: '--auto'**

  Sets the action the `commandFor` should take when this clickable is activated.

  See the documentation of particular components for the actions they support.

  * `--auto`: a default action for the target component.
  * `--show`: shows the target component.
  * `--hide`: hides the target component.
  * `--toggle`: toggles the target component.
  * `--copy`: copies the target ClipboardItem.

* **commandFor**

  **string**

  ID of a component that should respond to activations (e.g. clicks) on this component.

  See `command` for how to control the behavior of the target.

* **defaultChecked**

  **boolean**

  **Default: false**

  Whether the control is active by default.

* **disabled**

  **boolean**

  **Default: false**

  Disables the control, disallowing any interaction.

* **id**

  **string**

  A unique identifier for the element.

* **label**

  **string**

  Visual content to use as the control label.

* **name**

  **string**

  An identifier for the control that is unique within the nearest containing `Form` component.

* **value**

  **string**

  The value used in form data when the control is checked.

## Events

Learn more about [registering events](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/using-polaris-components#event-handling).

* **change**

  **CallbackEventListener\<typeof tagName>**

  A callback that is run whenever the control is changed.

### CallbackEventListener

```ts
(EventListener & {
    (event: CallbackEvent<TTagName, Event> & TData): void;
}) | null
```

### CallbackEvent

```ts
TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}
```

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/switch-default-DhneZy-s.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-switch label="Shipping insurance"></s-switch>
  ```