> For the complete documentation index, see [llms.txt](https://kb.craftformswp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kb.craftformswp.com/documentation/ecommerce/catalog/catalog-item-choices.md). # Catalog Items as Choices Let visitors pick the item they book inside the form: which apartment, which boat, which ticket. A Radio or Select field lists your catalog items as its choices, with each item's name, description, photo and price. When a visitor picks one, the form switches to that item: its prices, capacity, dates and rules. What they already filled in stays. One form then serves all your apartments, on one booking page. ![A Radio field listing two apartments as cards; one isn't free for the chosen dates](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2Fk7IEp9YnEm1yTjMn3K73%2Fcatalog-item-choices--choices-on-form.jpg?alt=media) ### What you need * **CraftForms PRO.** * Booking or product items in **CraftForms → Catalog**, built for the same form: the items must use the same date field (and guests and quantity fields) of the form, and book the same way (for example all by the night). * A form with a **Radio** or **Select** field for the choice. ### Set up the field 1. Open the form and add a **Radio** field (or a **Select** field for a dropdown). Give it a label, like "Apartment", and a **Field Name**. 2. In the field's **Options** panel, turn on **Choices from catalog items**. 3. Under **Items offered**, tick the items visitors can choose. Each shows its kind, like **Nightly stay**, **Time slots** or **Product**. 4. For booking items: leave **Mark items that aren't free for the chosen dates** on (see [Items that aren't free](#items-that-arent-free)). 5. Optional: under **Price shown on each choice**, pick an item smart variable, like `nightly_rate`, and type the **Text after the price**, like `/ night`. Each choice then shows "€175.00 / night". 6. For a Radio field with photos: open **Options Settings** and set **Option Style** to **Cards**. 7. Save the form. ![Choices from catalog items in the Radio field's Options panel](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2FlJCD5FcjAD8BVBrTO0YS%2Fcatalog-item-choices--field-settings.jpg?alt=media) Names, descriptions and photos come from **CraftForms → Catalog**, every time the form is shown, so a change there shows up in the form straight away. Items that are no longer active are left out. The price on a choice is only text. It isn't added to the form's price: the form's own price formula already uses the chosen item's values. ### What visitors see 1. The visitor picks an item. The form reloads for it in a moment (a spinner shows over the form): the price follows that item's smart variables and price, the date field shows that item's free dates and its stay rules, and the guests or quantity field is checked against its capacity or stock. 2. Everything the visitor typed or picked stays. Their dates stay too, when the new item can take them. 3. In a [multi-step form](/documentation/form-building/create-form/multi-step-forms.md), the visitor stays on the step they're on. If the form can't load the item (for example, the connection drops), the choice goes back to the previous item and a message asks the visitor to try again. Until an item is picked, the form uses its own default prices. To avoid showing a total that isn't real yet, hide the total until the field has a value, with a Field Condition on the block that shows it. ### Items that aren't free With **Mark items that aren't free for the chosen dates** on, the form checks the other items as soon as the visitor picks dates or changes the number of guests. Items that are booked on those dates, closed, or too small for the guests are greyed out with "Not available for these dates" and can't be picked. The item the form is showing isn't marked: its own date field already offers only its free dates. The setting shows for booking items only. ### Open the form with an item picked Add `?item=` to the page address, like `https://example.com/book/?item=12`. The form opens with that item picked. The ID is shown in **CraftForms → Catalog**. That's what the [Catalog Listing](/documentation/ecommerce/catalog/catalog-listing.md) does when its **Book button opens** one booking page: each Book button links to that page with the item. `?item=` is ignored when the item isn't offered by the field, or when the page itself is already linked to an item (for example a post with a [Catalog item panel](/documentation/ecommerce/catalog/catalog-item-panel.md) item: there, the form starts with the post's item picked). ### In embedded forms The choice works the same in a form embedded on another website (see [Embed](/documentation/form-building/embed.md)): picking an item reloads the form for it from your site, and the items that aren't free are marked. If the embed code names a catalog item that the field offers, the form opens with it picked. ### Good to know * A form can have one field with catalog items as choices. The editor warns you if another field already has them. * The editor also warns you when the ticked items book in different ways (another type or another date field). Pick items made for this form. * Your site only accepts items the field offers. A visitor can't send the form for another item by changing the page, and the price, capacity and stock are worked out again on your site for the chosen item. * The order or booking is made for the chosen item: its calendar, places and stock change, not the others'. * The field's value is the item's ID; the submission shows the item's name. * Product items work too, for example a Select field of tickets or passes: each has its own price and stock. * For a page per item instead of one shared booking page, link each item to its post with the [Catalog item panel](/documentation/ecommerce/catalog/catalog-item-panel.md), or set up items as in [Add/Modify Catalog Item](/documentation/ecommerce/catalog/add-modify-catalog-item.md). * To let visitors find a free item by their dates first, use [Catalog Search](/documentation/ecommerce/catalog/catalog-search.md).