---
title: Migrate InlineError from Polaris React
description: >-
  Replace Polaris React InlineError with field-owned errors or a form-level
  banner while preserving accessible error relationships.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/inline-error
  md: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/inline-error.md
api_name: app-home
---

# Migrate Inline​Error from Polaris React

Don't replace Polaris React `InlineError` with unassociated red text. Put a field-specific message on the destination field's `error` property so the component renders and associates it with the control. Use `s-banner` for an error that affects the complete form or request.

***

## Migrate a field error

## Migrating field validation errors

##### Polaris web components

```html
<s-text-field
  label="SKU"
  value="TSHIRT-001"
  autocomplete="off"
  error="SKU 'TSHIRT-001' already exists. SKUs must be unique across all products."
></s-text-field>
```

##### Polaris React

```tsx
import {InlineError, TextField} from '@shopify/polaris';

export function SkuField({sku, setSku, error}) {
  return (
    <div>
      <TextField
        id="sku"
        label="SKU"
        value={sku}
        onChange={setSku}
        autoComplete="off"
      />
      {error && <InlineError fieldID="sku" message={error} />}
    </div>
  );
}
```

***

## Replace Inline​Error properties

| Polaris React | Polaris web components | Migration notes |
| - | - | - |
| `message` | `error` on the field component | Keep the message actionable and specific. |
| `fieldID` | Remove when the field owns `error` | The destination field creates the accessible relationship. |

For a custom composite control, render a stable error element and connect it with the control's supported accessible-description mechanism. Use native `aria-describedby` only on elements that accept it. Test the resulting accessibility tree; proximity alone doesn't associate an error.

Don't use an error tone for instructions, warnings, or optional help. Use `details` for persistent field guidance and `s-banner` with the appropriate tone for a broader status.

***

## Handle submit errors

Keep field errors keyed by stable field names. Clear an error when it has been corrected or after the next authoritative validation response, not merely when the field receives focus.

For a failed submission with multiple invalid fields, show a concise form-level summary, preserve all values, and focus the first invalid field or summary. Keep the specific message on every affected control.

***

## Test the migration

* Trigger each validation rule and verify the message describes how to recover.
* Confirm the relevant field exposes the error in its accessible description.
* Submit multiple invalid fields and verify focus moves predictably.
* Correct, resubmit, fail at the server, and retry without losing values.
* Verify errors remain legible at narrow widths and high zoom.

***

## Remove Polaris React

After all errors are field-owned or intentionally form-level, remove `InlineError`, `errorTextID`, and manual IDs used only by it. Remove `@shopify/polaris` only after no other route in scope imports it.

***

## Related guidance

* [Migrate TextField from Polaris React](https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/text-field)
* [Migrate Banner from Polaris React](https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/banner)
* [Migrate Form from Polaris React](https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/form)

***