Switch

Use a switch to represent an on or off state that takes effect immediately when tapped.

import {
  reactExtension,
  Switch,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Switch accessibilityLabel="my-switch" />
  );
}

import {extension, Switch} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const baseSwitch = root.createComponent(Switch, {
    accessibilityLabel: 'my-switch',
  });

  root.appendChild(baseSwitch);
});

SwitchProps

SwitchProps

accessibilityLabel

A label used for buyers using assistive technologies.

checked

Whether the switch is active.

disabled

Whether the switch can be changed.

id

A unique identifier for the component.

label

Visual content to use as the switch label.

name

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

onChange

A callback that is run whenever the switch is changed. This callback is called with a boolean indicating whether the switch should now be active or inactive. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components), so you must store this value in state and reflect it back in the `checked` or `value` props.

toggles

The component's identifier whose visibility will be toggled when this component is actioned.

value

Whether the switch is selected. This prop is an alias for `checked`, and can be useful in form libraries that provide a normalized API for dealing with both `boolean` and `string` values. If both `value` and `checked` are set, `checked` takes precedence.

Related

• Checkbox

Examples

Use a switch to represent an on or off state that takes effect immediately when tapped.

This example demonstrates pairing the switch with a custom label and layout while keeping it accessible to screen readers.

import {
  reactExtension,
  InlineLayout,
  Switch,
  Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.footer.render-after',
  () => <Extension />,
);

function Extension() {
  const switchLabel = 'Shipping insurance';
  return (
    <InlineLayout
      padding="base"
      borderRadius="base"
      border="base"
      columns={['fill', 'auto']}
    >
      <Text>{switchLabel}</Text>
      <Switch accessibilityLabel={switchLabel} />
    </InlineLayout>
  );
}

import {
  extension,
  InlineLayout,
  Switch,
  Text,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const switchLabel = 'Shipping insurance';

    const inlineLayout = root.createComponent(
      InlineLayout,
      {
        padding: 'base',
        borderRadius: 'base',
        border: 'base',
        columns: ['fill', 'auto'],
      },
      [
        root.createComponent(
          Text,
          null,
          switchLabel,
        ),
        root.createComponent(Switch, {
          accessibilityLabel: switchLabel,
        }),
      ],
    );

    root.appendChild(inlineLayout);
  },
);

import {
  reactExtension,
  InlineLayout,
  Switch,
  Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.footer.render-after',
  () => <Extension />,
);

function Extension() {
  const switchLabel = 'Shipping insurance';
  return (
    <InlineLayout
      padding="base"
      borderRadius="base"
      border="base"
      columns={['fill', 'auto']}
    >
      <Text>{switchLabel}</Text>
      <Switch accessibilityLabel={switchLabel} />
    </InlineLayout>
  );
}

import {
  extension,
  InlineLayout,
  Switch,
  Text,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const switchLabel = 'Shipping insurance';

    const inlineLayout = root.createComponent(
      InlineLayout,
      {
        padding: 'base',
        borderRadius: 'base',
        border: 'base',
        columns: ['fill', 'auto'],
      },
      [
        root.createComponent(
          Text,
          null,
          switchLabel,
        ),
        root.createComponent(Switch, {
          accessibilityLabel: switchLabel,
        }),
      ],
    );

    root.appendChild(inlineLayout);
  },
);