---
title: Customize form controls with Checkout and Accounts Configuration API
description: >-
  Learn how to customize form controls, checkboxes, and buttons across surfaces
  using the Checkout and Accounts Configuration API.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/styling/checkout-and-accounts-configuration/customize-form-controls
  md: >-
    https://shopify.dev/docs/apps/build/checkout/styling/checkout-and-accounts-configuration/customize-form-controls.md
api_name: checkout-ui-extensions
---

# Customize form controls with Checkout and Accounts Configuration API

**Plus:**

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

This guide shows how to customize form controls through the Checkout and Accounts Configuration API. Form control customizations are configured under [`branding.components`](https://shopify.dev/docs/api/admin-graphql/latest/input-objects/CheckoutAndAccountsConfigurationBrandingComponentsInput) and apply across all surfaces (checkout, customer accounts, and sign-in).

For an introduction to the API, see [About the Checkout and Accounts Configuration API](https://shopify.dev/docs/apps/build/checkout/styling/checkout-and-accounts-configuration). For the equivalent guide using `checkoutBrandingUpsert`, see [Customize form controls](https://shopify.dev/docs/apps/build/checkout/styling/customize-form-controls).

***

## Requirements

* You're [authenticated with the GraphQL Admin API](https://shopify.dev/docs/apps/build/authentication-authorization).
* Your app has access to the `read_checkout_and_accounts_configurations` and `write_checkout_and_accounts_configurations` access scopes.
* You have a Checkout and Accounts Configuration ID. To learn how to retrieve one, see [About the Checkout and Accounts Configuration API](https://shopify.dev/docs/apps/build/checkout/styling/checkout-and-accounts-configuration).

***

## Set label position and corner radius for form controls

## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json

## GraphQL mutation

```graphql
mutation UpdateFormControls($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
  checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
    configuration {
      branding {
        components {
          control { labelPosition cornerRadius border }
        }
      }
    }
    userErrors { field message code }
  }
}
```

## Query variables

```json
{
  "id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
  "configuration": {
    "branding": {
      "components": {
        "control": {
          "labelPosition": "OUTSIDE",
          "cornerRadius": "LARGE",
          "border": "FULL"
        }
      }
    }
  }
}
```

***

## Set the corner radius for checkboxes

## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json

## GraphQL mutation

```graphql
mutation UpdateCheckbox($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
  checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
    configuration {
      branding {
        components {
          checkbox { cornerRadius }
        }
      }
    }
    userErrors { field message code }
  }
}
```

## Query variables

```json
{
  "id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
  "configuration": {
    "branding": {
      "components": {
        "checkbox": {
          "cornerRadius": "BASE"
        }
      }
    }
  }
}
```

***

## Style primary buttons

## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json

## GraphQL mutation

```graphql
mutation UpdatePrimaryButton($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
  checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
    configuration {
      branding {
        components {
          primaryButton {
            cornerRadius
            inlinePadding
            blockPadding
            border
            typography { font weight letterCase size }
          }
        }
      }
    }
    userErrors { field message code }
  }
}
```

## Query variables

```json
{
  "id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
  "configuration": {
    "branding": {
      "components": {
        "primaryButton": {
          "cornerRadius": "NONE",
          "inlinePadding": "BASE",
          "blockPadding": "BASE",
          "border": "NONE",
          "typography": {
            "font": "SECONDARY",
            "weight": "BOLD",
            "letterCase": "UPPER",
            "size": "MEDIUM"
          }
        }
      }
    }
  }
}
```

***

## Customize form control colors

Form control colors are set through the shared semantic color role at [`components.shared.colors.control`](https://shopify.dev/docs/api/admin-graphql/latest/input-objects/CheckoutAndAccountsConfigurationBrandingSharedColorsInput), which applies across all surfaces:

## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json

## GraphQL mutation

```graphql
mutation UpdateControlColors($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
  checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
    configuration { id }
    userErrors { field message code }
  }
}
```

## Query variables

```json
{
  "id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
  "configuration": {
    "branding": {
      "components": {
        "shared": {
          "colors": {
            "control": "#0F3460"
          }
        }
      }
    }
  }
}
```

***

## Differences from the Checkout Branding API

| Checkout Branding API | Checkout and Accounts Configuration API |
| - | - |
| `customizations.control` | `branding.components.control` |
| `customizations.checkbox` | `branding.components.checkbox` |
| `customizations.primaryButton` | `branding.components.primaryButton` |
| `customizations.secondaryButton` | `branding.components.secondaryButton` |
| Form control colors via color schemes | Direct `colors` field on `components.control` |
| Applies to checkout only | Applies across all surfaces (checkout, customer accounts, sign-in) |

***

## Next steps

* Explore the [GraphQL Admin API](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutAndAccountsConfigurationUpdate) to learn more about customizing form controls across checkout, customer accounts, and sign-in.

***