---
title: Add a field to checkout
description: Learn how to use checkout UI extensions to add a custom field to checkout.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/fields-banners/add-field?extension=polaris
  md: >-
    https://shopify.dev/docs/apps/build/checkout/fields-banners/add-field.md?extension=polaris
---

# Add a field to checkout

A custom field is a property that allows users to enter text into a user interface. For example, you might want to create a custom field that collects delivery instructions from customers.

In this tutorial, you'll use checkout UI extensions to create a custom field for collecting delivery instructions from customers, and then save those instructions to a metafield.

This tutorial is for delivery instructions, but you can use it as an example to build other use cases for custom fields.

Follow along with this tutorial to build a sample app, or clone the completed sample app.

Before you start, consider reviewing our [custom field checkout UI extension UX guidelines](https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields).

**Shopify Plus:**

Checkout UI extensions are available only to [Shopify Plus](https://www.shopify.com/plus) merchants.

## What you'll learn

In this tutorial, you'll learn how to do the following:

* Generate a checkout UI extension that appears in the checkout flow using Shopify CLI.
* Set up configurations for your checkout UI extension in the extension TOML file.
* Use the Checkout UI component library to render an optional input field for customers to add a note.
* Save the note to a cart metafield and display the value in the Shopify admin.

## Requirements

* You're a [user with app development permissions](https://shopify.dev/docs/apps/build/dev-dashboard/user-permissions).

* You've created a new [development store](https://shopify.dev/docs/api/development-stores) with [test data generated by Shopify](https://shopify.dev/docs/api/development-stores/generated-test-data).

* You've [created an app](https://shopify.dev/docs/apps/build/scaffold-app) that uses Shopify CLI 3.85.1 or higher.

## Project

[View on GitHub](https://github.com/Shopify/example-checkout--custom-field--preact)

## Create a checkout UI extension

To create a checkout UI extension, you'll use Shopify CLI, which generates starter code for building your extension.

To create a checkout UI extension, you can use Shopify CLI, which generates starter code for building your extension and automates common development tasks.

1. Navigate to your app directory:

   ## Terminal

   ```terminal
   cd <directory>
   ```

2. Run the following command to create a new checkout UI extension:

   ## Terminal

   ```terminal
   shopify app generate extension --template checkout_ui --name my-checkout-ui-extension
   ```

3. Select `Checkout UI`.

   You should now have a new extension directory in your app's directory. The extension directory includes the extension script at `src/Checkout.jsx`. The following is an example directory structure:

   ## Checkout UI extension file structure

   ```text
   └── my-app
     └── extensions
       └── my-checkout-ui-extension
           ├── src
           │   └── Checkout.jsx OR Checkout.js // The index page of the checkout UI extension
           ├── locales
           │   ├── en.default.json // The default locale for the checkout UI extension
           │   └── fr.json // The locale file for non-regional French translations
           ├── shopify.extension.toml // The config file for the checkout UI extension
           └── package.json
   ```

4. Start your development server to build and preview your app:

   ## Terminal

   ```terminal
   shopify app dev
   ```

   [Read more](https://shopify.dev/docs/apps/build/cli-for-apps/test-apps-locally#overview-of-app-dev) about the processes that are executed when you run `app dev`.

5. Press `p` to open the Dev Console.

6. In the extension list for your app, click on the preview link for your extension.

### Set up a target

Set up a target for your checkout UI extension. [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets) control where your extension renders in the checkout flow.

#### Export the target from your script file

In your `Checkout.jsx` file, render the extension so it can be referenced in your configuration.

## /extensions/custom-delivery-instructions/src/Checkout.jsx

```jsx
import '@shopify/ui-extensions/preact';
import {render} from "preact";
import {useState} from "preact/hooks";


// 1. Export the extension
export default function() {
  render(<Extension />, document.body)
}


function Extension() {
  const {
    applyMetafieldChange,
    appMetafields,
    i18n: {translate},
    target: {value: deliveryGroupList},
  } = shopify;
  const [checked, setChecked] = useState(false);


  // Define the metafield namespace and key
  const metafieldNamespace = "yourAppNamespace"
  const metafieldKey = "deliveryInstructions";


  // Get a reference to the metafield
  const deliveryInstructions = appMetafields.value.find(
    (appMetafield) =>
      appMetafield.target.type === 'cart' &&
      appMetafield.metafield.namespace === metafieldNamespace &&
      appMetafield.metafield.key === metafieldKey,
  );


  // Guard against duplicate rendering of `shipping-option-list.render-after` target for one-time purchase and subscription sections. Calling `applyMetafieldsChange()` on the same namespace-key pair from duplicated extensions would otherwise cause an overwrite of the metafield value.
  // Instead of guarding, another approach would be to prefix the metafield key when calling `applyMetafieldsChange()`. The `deliveryGroupList`'s `groupType` could be used to such effect.'
  if (!deliveryGroupList || deliveryGroupList.groupType !== 'oneTimePurchase') {
    return null;
  }


  // Render UI components
  return (
    <s-stack gap="base">
      <s-checkbox
        checked={checked}
        onChange={handleChange}
        label={translate('deliveryInstructionsCheckbox')}
      />
      {checked && (
        <s-text-area
          label={translate('deliveryInstructions')}
          rows={3}
          onBlur={(event) => {
            // Apply the change to the cart metafield
            applyMetafieldChange({
              type: "updateCartMetafield",
              metafield: {
                namespace: metafieldNamespace,
                key: metafieldKey,
                type: "multi_line_text_field",
                value: event.target.value,
              }
            })
          }}
          value={`${deliveryInstructions?.metafield?.value || ''}`}
        />
      )}
    </s-stack>
  );


  async function handleChange() {
    setChecked(!checked);
  }
}
```

#### Reference the extension targets in your configuration file

You can define more than one target so that app users can add the extension to multiple locations in the checkout.

In your checkout UI extension's configuration file, for each of your targets, create an `[[extensions.targeting]]` section with the following information:

* `module`: The path to the file that contains the extension code.

* `target`: An identifier that specifies where you're injecting code into Shopify.

***

[`shopify.extension.toml`](https://shopify.dev/docs/apps/build/app-extensions/configure-app-extensions) is the configuration file for your extension. It contains basic information and settings.

**Note:**

Whenever you edit your extension configuration file, you need to restart your server for the changes to take effect.

## Terminal

```bash
shopify app dev
```

***

This example uses the `purchase.checkout.shipping-option-list.render-after` target, so the user can provide all shipping and delivery information at the same stage in the checkout process.

[purchase.checkout.shipping-option-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets)

## /extensions/custom-delivery-instructions/shopify.extension.toml

```toml
# Learn more about configuring your checkout UI extension:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration


# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "2025-10"


[[extensions]]
name = "custom-delivery-instructions"
handle = "custom-delivery-instructions"
type = "ui_extension"
uid = "9d93ba67-d760-b256-641e-db7147a028d983fc5ddc"


# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview


[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.shipping-option-list.render-after"


[[extensions.targeting.metafields]]
namespace = "yourAppNamespace"
key = "deliveryInstructions"


[extensions.capabilities]
# Gives your extension access to directly query Shopify’s storefront API.
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#api-access
api_access = true
```

## Set up a copyable cart metafield

Now that you've set up the target, you'll save custom field value in a cart metafield.

### Define the cart metafield namespace and key

Set a namespace and key for the cart metafield where you want to store the custom field value.

Later, you'll expose values stored in this metafield to merchants in the Shopify admin.

***

A [metafield](https://shopify.dev/docs/apps/build/custom-data/metafields/manage-metafields) is a custom field that you can use to store additional information about a Shopify resource. You can use metafields to store information specific to your app without setting up your own storage.

## /extensions/custom-delivery-instructions/src/Checkout.jsx

```jsx
import '@shopify/ui-extensions/preact';
import {render} from "preact";
import {useState} from "preact/hooks";


// 1. Export the extension
export default function() {
  render(<Extension />, document.body)
}


function Extension() {
  const {
    applyMetafieldChange,
    appMetafields,
    i18n: {translate},
    target: {value: deliveryGroupList},
  } = shopify;
  const [checked, setChecked] = useState(false);


  // Define the metafield namespace and key
  const metafieldNamespace = "yourAppNamespace"
  const metafieldKey = "deliveryInstructions";


  // Get a reference to the metafield
  const deliveryInstructions = appMetafields.value.find(
    (appMetafield) =>
      appMetafield.target.type === 'cart' &&
      appMetafield.metafield.namespace === metafieldNamespace &&
      appMetafield.metafield.key === metafieldKey,
  );


  // Guard against duplicate rendering of `shipping-option-list.render-after` target for one-time purchase and subscription sections. Calling `applyMetafieldsChange()` on the same namespace-key pair from duplicated extensions would otherwise cause an overwrite of the metafield value.
  // Instead of guarding, another approach would be to prefix the metafield key when calling `applyMetafieldsChange()`. The `deliveryGroupList`'s `groupType` could be used to such effect.'
  if (!deliveryGroupList || deliveryGroupList.groupType !== 'oneTimePurchase') {
    return null;
  }


  // Render UI components
  return (
    <s-stack gap="base">
      <s-checkbox
        checked={checked}
        onChange={handleChange}
        label={translate('deliveryInstructionsCheckbox')}
      />
      {checked && (
        <s-text-area
          label={translate('deliveryInstructions')}
          rows={3}
          onBlur={(event) => {
            // Apply the change to the cart metafield
            applyMetafieldChange({
              type: "updateCartMetafield",
              metafield: {
                namespace: metafieldNamespace,
                key: metafieldKey,
                type: "multi_line_text_field",
                value: event.target.value,
              }
            })
          }}
          value={`${deliveryInstructions?.metafield?.value || ''}`}
        />
      )}
    </s-stack>
  );


  async function handleChange() {
    setChecked(!checked);
  }
}
```

### Request the cart metafield in your `shopify.extension.toml`

Request the cart metafield by namespace and key to read it in the extension.

## /extensions/custom-delivery-instructions/shopify.extension.toml

```toml
# Learn more about configuring your checkout UI extension:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration


# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "2025-10"


[[extensions]]
name = "custom-delivery-instructions"
handle = "custom-delivery-instructions"
type = "ui_extension"
uid = "9d93ba67-d760-b256-641e-db7147a028d983fc5ddc"


# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview


[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.shipping-option-list.render-after"


[[extensions.targeting.metafields]]
namespace = "yourAppNamespace"
key = "deliveryInstructions"


[extensions.capabilities]
# Gives your extension access to directly query Shopify’s storefront API.
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#api-access
api_access = true
```

### Add an order metafield definition to copy the cart metafield

1. In the Shopify admin, add an **Order** [metafield definition](https://help.shopify.com/manual/custom-data/metafields/metafield-definitions/creating-custom-metafield-definitions) for your delivery instruction metafield.
2. Set the type to **Multi line text**.
3. Use the same `namespace` and `key` that you defined [in your `Checkout.jsx` file](#set-up-a-cart-metafield-that-gets-copied-to-the-order).
4. Enable **Copy values from cart metafields** to copy the cart metafield value to the order.

The cart metafield value will display on the order metafield with this definition.

**Tip:**

You can also enable the copy programmatically using the [`cart to order copyable`](https://shopify.dev/docs/apps/build/metafields/use-metafield-capabilities#cart-to-order-copyable) capability.

## Add a delivery instruction input

Build a basic user interface using components from the [web components](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components) library.

### Add a delivery instruction option and text area

Using checkout UI components, build a basic UI for the delivery instruction input.

***

This UI includes a checkbox component to specify whether the customer wants to add a delivery instruction. When the checkbox is checked, a text area component appears for the customer to enter the delivery instruction. If the customer has already entered a value, then the value is displayed.

Checkout UI extensions are limited to specific UI components exposed by the platform [for security reasons](https://shopify.dev/docs/api/checkout-ui-extensions#security). Web components allow you to create a UI that feels seamless within the checkout experience, and that inherits a merchant's brand settings.

[Stack](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack) [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/checkbox) [Text area](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/text-area)

## /extensions/custom-delivery-instructions/src/Checkout.jsx

```jsx
import '@shopify/ui-extensions/preact';
import {render} from "preact";
import {useState} from "preact/hooks";


// 1. Export the extension
export default function() {
  render(<Extension />, document.body)
}


function Extension() {
  const {
    applyMetafieldChange,
    appMetafields,
    i18n: {translate},
    target: {value: deliveryGroupList},
  } = shopify;
  const [checked, setChecked] = useState(false);


  // Define the metafield namespace and key
  const metafieldNamespace = "yourAppNamespace"
  const metafieldKey = "deliveryInstructions";


  // Get a reference to the metafield
  const deliveryInstructions = appMetafields.value.find(
    (appMetafield) =>
      appMetafield.target.type === 'cart' &&
      appMetafield.metafield.namespace === metafieldNamespace &&
      appMetafield.metafield.key === metafieldKey,
  );


  // Guard against duplicate rendering of `shipping-option-list.render-after` target for one-time purchase and subscription sections. Calling `applyMetafieldsChange()` on the same namespace-key pair from duplicated extensions would otherwise cause an overwrite of the metafield value.
  // Instead of guarding, another approach would be to prefix the metafield key when calling `applyMetafieldsChange()`. The `deliveryGroupList`'s `groupType` could be used to such effect.'
  if (!deliveryGroupList || deliveryGroupList.groupType !== 'oneTimePurchase') {
    return null;
  }


  // Render UI components
  return (
    <s-stack gap="base">
      <s-checkbox
        checked={checked}
        onChange={handleChange}
        label={translate('deliveryInstructionsCheckbox')}
      />
      {checked && (
        <s-text-area
          label={translate('deliveryInstructions')}
          rows={3}
          onBlur={(event) => {
            // Apply the change to the cart metafield
            applyMetafieldChange({
              type: "updateCartMetafield",
              metafield: {
                namespace: metafieldNamespace,
                key: metafieldKey,
                type: "multi_line_text_field",
                value: event.target.value,
              }
            })
          }}
          value={`${deliveryInstructions?.metafield?.value || ''}`}
        />
      )}
    </s-stack>
  );


  async function handleChange() {
    setChecked(!checked);
  }
}
```

### Store the user input in the metafield

Use the `applyMetafieldChange` helper function to store the value that the customer enters in the cart metafield. This metafield value is later associated with the order.

***

`applyMetafieldChange` is part of the [Metafields API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/metafields-api). To learn more about it and other available APIs, refer to the [Checkout UI Extension APIs reference](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis).

[apply​Metafield​Change](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/metafields-api)

## /extensions/custom-delivery-instructions/src/Checkout.jsx

```jsx
import '@shopify/ui-extensions/preact';
import {render} from "preact";
import {useState} from "preact/hooks";


// 1. Export the extension
export default function() {
  render(<Extension />, document.body)
}


function Extension() {
  const {
    applyMetafieldChange,
    appMetafields,
    i18n: {translate},
    target: {value: deliveryGroupList},
  } = shopify;
  const [checked, setChecked] = useState(false);


  // Define the metafield namespace and key
  const metafieldNamespace = "yourAppNamespace"
  const metafieldKey = "deliveryInstructions";


  // Get a reference to the metafield
  const deliveryInstructions = appMetafields.value.find(
    (appMetafield) =>
      appMetafield.target.type === 'cart' &&
      appMetafield.metafield.namespace === metafieldNamespace &&
      appMetafield.metafield.key === metafieldKey,
  );


  // Guard against duplicate rendering of `shipping-option-list.render-after` target for one-time purchase and subscription sections. Calling `applyMetafieldsChange()` on the same namespace-key pair from duplicated extensions would otherwise cause an overwrite of the metafield value.
  // Instead of guarding, another approach would be to prefix the metafield key when calling `applyMetafieldsChange()`. The `deliveryGroupList`'s `groupType` could be used to such effect.'
  if (!deliveryGroupList || deliveryGroupList.groupType !== 'oneTimePurchase') {
    return null;
  }


  // Render UI components
  return (
    <s-stack gap="base">
      <s-checkbox
        checked={checked}
        onChange={handleChange}
        label={translate('deliveryInstructionsCheckbox')}
      />
      {checked && (
        <s-text-area
          label={translate('deliveryInstructions')}
          rows={3}
          onBlur={(event) => {
            // Apply the change to the cart metafield
            applyMetafieldChange({
              type: "updateCartMetafield",
              metafield: {
                namespace: metafieldNamespace,
                key: metafieldKey,
                type: "multi_line_text_field",
                value: event.target.value,
              }
            })
          }}
          value={`${deliveryInstructions?.metafield?.value || ''}`}
        />
      )}
    </s-stack>
  );


  async function handleChange() {
    setChecked(!checked);
  }
}
```

### Preview the extension

Preview your extension to make sure that it works as expected.

#### Start your server

Run the Shopify CLI `dev` command to build your app and preview it on your development store.

1. In a terminal, navigate to your app directory.

2. Either start or restart your server to build and preview your app:

   ## Terminal

   ```bash
   shopify app dev
   ```

3. Press `p` to open the Dev Console.

4. In the extension list for your app, click on the preview link for the custom field extension.

   The checkout opens.

**Note:** Your Provide delivery instructions checkbox should render in the Shipping step of the checkout.

***

This section describes how to solve some potential errors when you run `dev` for an app that contains a checkout UI extension.

### Property token error

If you receive the error `ShopifyCLI:AdminAPI requires the property token to be set`, then you'll need to use the [`--checkout-cart-url` flag](https://shopify.dev/docs/api/shopify-cli/app/app-dev#flags) to direct Shopify CLI to open a checkout session for you.

## Terminal

```terminal
shopify app dev --checkout-cart-url cart/{product_variant_id}:{quantity}
```

### Missing checkout link

If you don't receive the test checkout URL when you run `dev`, then verify the following:

* You have a development store populated with products.

* You're logged in to the correct Partners organization and development store. To verify, check your app info using the following command:

  ## Terminal

  ```terminal
  shopify app info
  ```

Otherwise, you can manually create a checkout with the following steps:

1. From your development store's storefront, add some products to your cart.

2. From the cart, click **Checkout**.

3. From directory of the app that contains your extension, run `dev` to preview your app:

   ## Terminal

   ```terminal
   shopify app dev
   ```

4. On the checkout page for your store, change the URL by appending the `?dev=https://{tunnel_url}/extensions` query string and reload the page. The `tunnel_url` parameter allows your app to be accessed using a unique HTTPS URL.

   You should now see a rendered order note that corresponds to the code in your project template.

## Test the extension

Test your extension to make sure that it works as expected.

### Test the extension in checkout

Place an order with delivery instructions in the checkout.

1. With your server running, open the storefront of your dev store.

2. Add a product to the cart and then check out.

3. Fill out the contact and shipping address information, and then move to the **Shipping** step of the checkout.

   Your **Provide delivery instructions** checkbox appears.

4. Select the **Provide delivery instructions** checkbox. A text field appears.

5. Enter a value in the text field and then complete the checkout.

6. In the Shopify admin for the dev store, open the order details page for the order that you just placed.

The delivery instructions that you entered are displayed in the **Metafields** section, in the delivery instructions field that you created.

***

![Delivery instructions in the order details page.](https://shopify.dev/assets/assets/apps/checkout/metafield-By9MqDB4.png)

When you're ready to release your changes to users, you can create and release an [app version](https://shopify.dev/docs/apps/launch/deployment/app-versions). An app version is a snapshot of your app configuration and all extensions.

1. Navigate to your app directory.

2. Run the following command.

   Optionally, you can provide a name or message for the version using the `--version` and `--message` flags.

   ## Terminal

   ```terminal
   shopify app deploy
   ```

Releasing an app version replaces the current active version that's served to stores that have your app installed. It might take several minutes for app users to be upgraded to the new version.

**Tip:**

If you want to create a version, but avoid releasing it to users, then run the `deploy` command with a `--no-release` flag. You can release the unreleased app version using Shopify CLI's [`release`](https://shopify.dev/docs/api/shopify-cli/app/app-release) command, or through the Dev Dashboard.

## /extensions/custom-delivery-instructions/shopify.extension.toml

```toml
# Learn more about configuring your checkout UI extension:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration


# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "2025-10"


[[extensions]]
name = "custom-delivery-instructions"
handle = "custom-delivery-instructions"
type = "ui_extension"
uid = "9d93ba67-d760-b256-641e-db7147a028d983fc5ddc"


# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview


[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.shipping-option-list.render-after"


[[extensions.targeting.metafields]]
namespace = "yourAppNamespace"
key = "deliveryInstructions"


[extensions.capabilities]
# Gives your extension access to directly query Shopify’s storefront API.
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#api-access
api_access = true
```

## /extensions/custom-delivery-instructions/src/Checkout.jsx

```jsx
import '@shopify/ui-extensions/preact';
import {render} from "preact";
import {useState} from "preact/hooks";


// 1. Export the extension
export default function() {
  render(<Extension />, document.body)
}


function Extension() {
  const {
    applyMetafieldChange,
    appMetafields,
    i18n: {translate},
    target: {value: deliveryGroupList},
  } = shopify;
  const [checked, setChecked] = useState(false);


  // Define the metafield namespace and key
  const metafieldNamespace = "yourAppNamespace"
  const metafieldKey = "deliveryInstructions";


  // Get a reference to the metafield
  const deliveryInstructions = appMetafields.value.find(
    (appMetafield) =>
      appMetafield.target.type === 'cart' &&
      appMetafield.metafield.namespace === metafieldNamespace &&
      appMetafield.metafield.key === metafieldKey,
  );


  // Guard against duplicate rendering of `shipping-option-list.render-after` target for one-time purchase and subscription sections. Calling `applyMetafieldsChange()` on the same namespace-key pair from duplicated extensions would otherwise cause an overwrite of the metafield value.
  // Instead of guarding, another approach would be to prefix the metafield key when calling `applyMetafieldsChange()`. The `deliveryGroupList`'s `groupType` could be used to such effect.'
  if (!deliveryGroupList || deliveryGroupList.groupType !== 'oneTimePurchase') {
    return null;
  }


  // Render UI components
  return (
    <s-stack gap="base">
      <s-checkbox
        checked={checked}
        onChange={handleChange}
        label={translate('deliveryInstructionsCheckbox')}
      />
      {checked && (
        <s-text-area
          label={translate('deliveryInstructions')}
          rows={3}
          onBlur={(event) => {
            // Apply the change to the cart metafield
            applyMetafieldChange({
              type: "updateCartMetafield",
              metafield: {
                namespace: metafieldNamespace,
                key: metafieldKey,
                type: "multi_line_text_field",
                value: event.target.value,
              }
            })
          }}
          value={`${deliveryInstructions?.metafield?.value || ''}`}
        />
      )}
    </s-stack>
  );


  async function handleChange() {
    setChecked(!checked);
  }
}
```

## Tutorial complete!

Nice work - what you just built could be used by Shopify merchants around the world! Keep the momentum going with these related tutorials and resources.

### Next steps

[Review custom field UX guidelines\
\
](https://shopify.dev/docs/apps/checkout/custom/fields/ux-guidelines)

[Build a user experience by following our UX guidelines.](https://shopify.dev/docs/apps/checkout/custom/fields/ux-guidelines)

[Localize your extension\
\
](https://shopify.dev/docs/apps/checkout/localizing-ui-extensions)

[Learn how to localize the text and number formats in your extension.](https://shopify.dev/docs/apps/checkout/localizing-ui-extensions)

[Explore the checkout UI extension web component reference\
\
](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components)

[Learn about all of the components that you can use in your checkout UI extension.](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components)

[Explore the checkout UI targets reference\
\
](https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets)

[Learn about the targets offered in checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets)