---
title: CartForm
description: Creates a form for managing cart operations.
api_version: 2026-04
api_name: hydrogen
source_url:
  html: https://shopify.dev/docs/api/hydrogen/2023-07/components/cartform
  md: https://shopify.dev/docs/api/hydrogen/2023-07/components/cartform.md
---

# CartForm

Creates a form for managing cart operations. Use `CartActionInput` to accept form inputs of known type.

#### Props

**`CartActionInputProps & CartFormCommonProps`**

### CartActionInputProps

* **CartAttributesUpdateProps | CartBuyerIdentityUpdateProps | CartCreateProps | CartDiscountCodesUpdateProps | CartGiftCardCodesUpdateProps | CartGiftCardCodesAddProps | CartGiftCardCodesRemoveProps | CartLinesAddProps | CartLinesUpdateProps | CartLinesRemoveProps | CartNoteUpdateProps | CartSelectedDeliveryOptionsUpdateProps | CartMetafieldsSetProps | CartMetafieldDeleteProps | CartDeliveryAddressesAddProps | CartDeliveryAddressesRemoveProps | CartDeliveryAddressesUpdateProps | CartDeliveryAddressesReplaceProps | CartCustomProps**

### CartFormCommonProps

* **children**

  **ReactNode | ((fetcher: FetcherWithComponents\<any>) => ReactNode)**

  **required**

  Children nodes of CartForm. Children can be a render prop that receives the fetcher.

* **fetcherKey**

  **string**

  Optional key to use for the fetcher.

* **route**

  **string**

  The route to submit the form to. Defaults to the current route.

### CartActionInputProps

```ts
CartAttributesUpdateProps | CartBuyerIdentityUpdateProps | CartCreateProps | CartDiscountCodesUpdateProps | CartGiftCardCodesUpdateProps | CartGiftCardCodesAddProps | CartGiftCardCodesRemoveProps | CartLinesAddProps | CartLinesUpdateProps | CartLinesRemoveProps | CartNoteUpdateProps | CartSelectedDeliveryOptionsUpdateProps | CartMetafieldsSetProps | CartMetafieldDeleteProps | CartDeliveryAddressesAddProps | CartDeliveryAddressesRemoveProps | CartDeliveryAddressesUpdateProps | CartDeliveryAddressesReplaceProps | CartCustomProps
```

### CartAttributesUpdateProps

* action

  ```ts
  'AttributesUpdateInput'
  ```

* inputs

  ```ts
  { attributes: AttributeInput[]; } & OtherFormData
  ```

### AttributeInput



### OtherFormData



### CartBuyerIdentityUpdateProps

* action

  ```ts
  'BuyerIdentityUpdate'
  ```

* inputs

  ```ts
  { buyerIdentity: CartBuyerIdentityInput; } & OtherFormData
  ```

### CartBuyerIdentityInput



### CartCreateProps

* action

  ```ts
  'Create'
  ```

* inputs

  ```ts
  { input: CartInput; } & OtherFormData
  ```

### CartInput



### CartDiscountCodesUpdateProps

* action

  ```ts
  'DiscountCodesUpdate'
  ```

* inputs

  ```ts
  { discountCodes: string[]; } & OtherFormData
  ```

### CartGiftCardCodesUpdateProps

* action

  ```ts
  'GiftCardCodesUpdate'
  ```

* inputs

  ```ts
  { giftCardCodes: string[]; } & OtherFormData
  ```

### CartGiftCardCodesAddProps

* action

  ```ts
  'GiftCardCodesAdd'
  ```

* inputs

  ```ts
  { giftCardCodes: string[]; } & OtherFormData
  ```

### CartGiftCardCodesRemoveProps

* action

  ```ts
  'GiftCardCodesRemove'
  ```

* inputs

  ```ts
  { giftCardCodes: string[]; } & OtherFormData
  ```

### CartLinesAddProps

* action

  ```ts
  'LinesAdd'
  ```

* inputs

  ```ts
  { lines: OptimisticCartLineInput[]; } & OtherFormData
  ```

### OptimisticCartLineInput

```ts
CartLineInput & {
  selectedVariant?: unknown;
}
```

### CartLineInput



### CartLinesUpdateProps

* action

  ```ts
  'LinesUpdate'
  ```

* inputs

  ```ts
  { lines: CartLineUpdateInput[]; } & OtherFormData
  ```

### CartLineUpdateInput



### CartLinesRemoveProps

* action

  ```ts
  'LinesRemove'
  ```

* inputs

  ```ts
  { lineIds: string[]; } & OtherFormData
  ```

### CartNoteUpdateProps

* action

  ```ts
  'NoteUpdate'
  ```

* inputs

  ```ts
  { note: string; } & OtherFormData
  ```

### CartSelectedDeliveryOptionsUpdateProps

* action

  ```ts
  'SelectedDeliveryOptionsUpdate'
  ```

* inputs

  ```ts
  { selectedDeliveryOptions: CartSelectedDeliveryOptionInput[]; } & OtherFormData
  ```

### CartSelectedDeliveryOptionInput



### CartMetafieldsSetProps

* action

  ```ts
  'MetafieldsSet'
  ```

* inputs

  ```ts
  { metafields: MetafieldWithoutOwnerId[]; } & OtherFormData
  ```

### MetafieldWithoutOwnerId



### CartMetafieldDeleteProps

* action

  ```ts
  'MetafieldsDelete'
  ```

* inputs

  ```ts
  { key: string; } & OtherFormData
  ```

### CartDeliveryAddressesAddProps

* action

  ```ts
  'DeliveryAddressesAdd'
  ```

* inputs

  ```ts
  { addresses: CartSelectableAddressInput[]; } & OtherFormData
  ```

### CartDeliveryAddressesRemoveProps

* action

  ```ts
  'DeliveryAddressesRemove'
  ```

* inputs

  ```ts
  { addressIds: string[]; } & OtherFormData
  ```

### CartDeliveryAddressesUpdateProps

* action

  ```ts
  'DeliveryAddressesUpdate'
  ```

* inputs

  ```ts
  { addresses: CartSelectableAddressUpdateInput[]; } & OtherFormData
  ```

### CartDeliveryAddressesReplaceProps

* action

  ```ts
  'DeliveryAddressesReplace'
  ```

* inputs

  ```ts
  { addresses: CartSelectableAddressInput[]; } & OtherFormData
  ```

### CartCustomProps

* action

  ```ts
  `Custom${string}`
  ```

* inputs

  ```ts
  Record<string, unknown>
  ```

### CartFormCommonProps

* children

  Children nodes of CartForm. Children can be a render prop that receives the fetcher.

  ```ts
  ReactNode | ((fetcher: FetcherWithComponents<any>) => ReactNode)
  ```

* fetcherKey

  Optional key to use for the fetcher.

  ```ts
  string
  ```

* route

  The route to submit the form to. Defaults to the current route.

  ```ts
  string
  ```

Examples

### Examples

* #### Example

  ##### JavaScript

  ```js
  import {data} from 'react-router';
  import {CartForm} from '@shopify/hydrogen';
  import invariant from 'tiny-invariant';

  export default function Cart() {
    return (
      <CartForm
        action={CartForm.ACTIONS.LinesUpdate}
        inputs={{
          lines: [
            {
              id: 'gid://shopify/CartLine/123456789',
              quantity: 3,
            },
          ],
          other: 'data',
        }}
      >
        <button>Quantity up</button>
      </CartForm>
    );
  }

  export async function action({request, context}) {
    const {cart} = context;

    const formData = await request.formData();
    const {action, inputs} = CartForm.getFormInput(formData);

    let status = 200;
    let result;

    if (action === CartForm.ACTIONS.LinesUpdate) {
      result = await cart.updateLines(inputs.lines);
    } else {
      invariant(false, `${action} cart action is not defined`);
    }

    const headers = cart.setCartId(result.cart.id);

    return data(result, {status, headers});
  }
  ```

  ##### TypeScript

  ```ts
  import {type ActionFunctionArgs, data} from 'react-router';
  import {
    type CartQueryDataReturn,
    type HydrogenCart,
    CartForm,
  } from '@shopify/hydrogen';
  import invariant from 'tiny-invariant';

  export default function Cart() {
    return (
      <CartForm
        action={CartForm.ACTIONS.LinesUpdate}
        inputs={{
          lines: [
            {
              id: 'gid://shopify/CartLine/123456789',
              quantity: 3,
            },
          ],
          other: 'data',
        }}
      >
        <button>Quantity up</button>
      </CartForm>
    );
  }

  export async function action({request, context}: ActionFunctionArgs) {
    const cart = context.cart as HydrogenCart;
    // cart is type HydrogenCart or HydrogenCartCustom
    // Declare cart type in remix.env.d.ts for interface AppLoadContext to avoid type casting
    // const {cart} = context;

    const formData = await request.formData();
    const {action, inputs} = CartForm.getFormInput(formData);

    let status = 200;
    let result: CartQueryDataReturn;

    if (action === CartForm.ACTIONS.LinesUpdate) {
      result = await cart.updateLines(inputs.lines);
    } else {
      invariant(false, `${action} cart action is not defined`);
    }

    const headers = cart.setCartId(result.cart.id);

    return data(result, {status, headers});
  }
  ```

***