Save bar not showing when form inputs change in Block Extension - Unified Polaris 2025-10

Extensions
1

Save bar not appearing when modifying s-checkbox in Block Extension (Unified Polaris 2025-10)

Environment:

  • Shopify App created with Remix starter today
  • Unified Polaris Web Components version: 2025-10
  • Extension type: Block extension
  • Target: admin.product-details.block.render
  • Framework: Preact

Problem:
The contextual save bar doesn’t appear when I modify form inputs (s-checkbox, s-text-field, s-number-field, etc.) in my Block extension, even though I’m using the component as documented.

According to the documentation at Admin UI extensions :

“Whenever an input field is changed, the Form component will automatically update the dirty state of the resource page.”

However, this is not happening - the save bar never appears when I change input values.

Code:

import { render } from "preact";

export default async () => {
  render(<Extension />, document.body);
};

function Extension() {
  const {
    i18n,
    data,
    extension: { target },
  } = shopify;
  console.log({ data });

  return (
    <s-admin-block heading="My Block Extension">
      <s-stack direction="block">
        <s-text type="strong">{i18n.translate("welcome", { target })}</s-text>

        <s-form
          onSubmit={() => {
            console.log("submit");
          }}
          onReset={() => {
            console.log("reset");
          }}
        >
          <s-checkbox
            required={true}
            name="check"
            label="Require a confirmation step"
            details="Ensure all criteria are met before proceeding"
            defaultChecked={false}
          ></s-checkbox>
        </s-form>
      </s-stack>
    </s-admin-block>
  );
}

What I’ve tried:

  • :white_check_mark: Added name attribute to the checkbox
  • :white_check_mark: Used defaultChecked={false} to set initial value
  • :white_check_mark: Wrapped inputs in <s-form> component
  • :white_check_mark: Added controlled component with checked + onChange
  • :white_check_mark: Tried onchange (lowercase) instead of onChange
  • :white_check_mark: Tried default-value (kebab-case) instead of defaultValue
  • :white_check_mark: Tried adding s-text-field and s-number-field - same issue

Expected behavior:
According to the documentation, when an input field is changed, the Form component should automatically update the dirty state of the resource page and show the contextual save bar.

Actual behavior:
The save bar never appears, regardless of which input type I use or how I configure it.

Questions:

  1. Is there something wrong with my implementation?
  2. Is this a known issue with Unified Polaris web components in 2025-10?
  3. Are there any workarounds to make the save bar work with these components?

Any help would be greatly appreciated!

1 Like
2

Haven’t tried it myself but have you tried adding the data-save-bar attribute to the form element?

3

Yes I tried and nothing changed

4

And it’s form <form elements, not <s-form Polaris :slight_smile:

5

Hi Thomas!

Thanks for reaching out about utilizing the save bar with the new web components :slight_smile:

I was able to get your exact extension code working on my test app. The s-text-field and s-number-field worked as well with the following:

import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
}

function Extension() {
  const {i18n, data, extension: {target}} = shopify;
  console.log({data});

  return (
    <s-admin-block heading="My Block Extension">
      <s-stack direction="block">
        <s-text type="strong">{i18n.translate("welcome", { target })}</s-text>

        <s-form
          onSubmit={() => {
            console.log("submit");
          }}
          onReset={() => {
            console.log("reset");
          }}
        >
          <s-text-field
            label="Product Title"
            name="title"
          ></s-text-field>
          <s-number-field
            label="Product Price"
            name="price"
          ></s-number-field>
          <s-checkbox
            required={true}
            name="check"
            label="Require a confirmation step"
            details="Ensure all criteria are met before proceeding"
            defaultChecked={false}
          ></s-checkbox>
        </s-form>
      </s-stack>
    </s-admin-block>
  );
}

Here’s a recording of my test for your reference:

How do you the Unified Polaris Components implemented?
Is your extension.toml file set to API version 2025-10?

6

Hi and thank you for your answer!

I tried with your code, it worked, then I tried again with my code and it worked too.

Nothing changed tbh since the first message of this topic, but it’s fine now so thank you :slight_smile:

1 Like