# Component: Checkout Form

The Checkout Form component is the foundation of our checkout experience, providing a powerful and flexible way to capture user input. Built for versatility, it adapts seamlessly to a wide range of scenarios, from simple data capture to complex multi-step checkouts.

It includes a library of reusable subcomponents for common fields such as text, email, address, and payment details. These pre-built elements make it fast and consistent to assemble forms, while still allowing for customisation when needed.

We recommend using the [60/40 layout](https://docs.limio.com/product/page-builder/page-builder-overview-of-key-features/configure-layout) for this component, using the left-side (60%) for the Checkout Form and the right-side (40%) of the page for [cart components](/components/component-library/cart-components/using-cart-components-for-acquisition.md). Note that this layout is responsive and the right-side will go at the top of the page for smaller devices.

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/story/shop-components-checkout-checkout-form--default&full=1&shortcuts=false&singleStory=true&embed=true>" %}

## Adding a Subcomponent

To add subcomponents, you'll need the Checkout Form component. Follow these steps:

1\. Click on "Add Component".\
2\. Search for the Checkout Form component under Acquisition.\
3\. Click on the purple pencil edit button.\
4\. Select "Edit Subcomponents"

See this article for a list of the available subcomponents: [Modular Checkout Subcomponents](/components/component-library/modular-checkout-components/modular-checkout-subcomponents-in-form.md) See this article for more information on customising your subcomponents: [Common customisations for Form subcomponents](/components/component-library/modular-checkout-components/common-customisations-for-form-subcomponents.md)

| Prop Label                       | Type      | Default Value | Info                                                                                              |
| -------------------------------- | --------- | ------------- | ------------------------------------------------------------------------------------------------- |
| Required field label             | string    | Required      | This text will appear next to all required fields. If left blank, no indicator will be displayed. |
| Optional field label             | string    |               | This text will appear next to all optional fields. If left blank, no indicator will be displayed. |
| Submit button label              | string    | Submit        |                                                                                                   |
| Order complete URL               | string    | /complete/    | URL to redirect customer to after successful form submission                                      |
| Invalid form message             | rich text |               |                                                                                                   |
| Invalid form message font color  | color     | #856404       |                                                                                                   |
| Invalid message background color | color     | #FFF3CD       |                                                                                                   |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.limio.com/components/component-library/modular-checkout-components/component-checkout-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.