Product
A product card field displaying an image, title, price, description, and quantity controls.
The Product field renders a product card with images, pricing, and optional tax and shipping details. It collects a quantity value from the user. Use it to build order forms, product catalogs, or checkout pages where users select items and quantities.
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| label | string | -- | Label text displayed above the product card |
| width | LayoutWidth | "full" | Horizontal space the field occupies |
| required | boolean | false | Whether the user must select a quantity before submission |
| key | string | -- | Variable name for referencing the field value |
| productId | string | -- | External product identifier for backend processing |
| images | string[] | -- | Array of product image URLs |
| defaultImageIndex | number | -- | Zero-based index of the image shown by default |
| defaultQuantity | number | -- | Pre-filled quantity value |
| title | string | -- | Product name displayed as the card heading |
| price | string | -- | Display price (e.g. "$49.99") |
| currency | string | -- | Currency code (e.g. "USD", "EUR") |
| description | string | -- | Product description text |
| taxPercent | number | -- | Tax rate as a percentage (e.g. 8.5 for 8.5%) |
| shippingCost | number | -- | Flat shipping cost |
| shippingPerUnit | number | -- | Additional shipping cost per unit |
Example Usage
A product card for an online store:
{
"type": "product",
"title": "Wireless Headphones",
"price": "$79.99",
"currency": "USD",
"description": "Noise-canceling over-ear headphones with 30-hour battery life.",
"images": [
"https://example.com/headphones-front.jpg",
"https://example.com/headphones-side.jpg"
],
"defaultImageIndex": 0,
"defaultQuantity": 1,
"taxPercent": 8.25,
"shippingCost": 5.99,
"shippingPerUnit": 0
}