Icon Select (Tile)
A visual grid of image tiles the user can select from, with configurable rows, columns, and aspect ratio.
The Icon Select field (labeled "Tile" in the sidebar) renders a grid of image-based options that users click to select. Each tile is backed by an image URL or base64 data. It is ideal for visual product selection, mood boards, style pickers, or any scenario where images are more effective than text labels.
For the shared properties available on all fields (label, help, note, key, width, visual styling, required), see the Form Fields Overview.
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| aspect | AspectRatio | "4:3" | Aspect ratio of each tile. One of "1:1", "3:4", "4:3", "9:16", "16:9" |
| cols | number | 6 | Number of columns in the grid (1--12) |
| rows | number | 1 | Number of rows in the grid (1--12) |
| options | Option[] | 6 placeholder images | Image options. The value is stored on selection; the label holds the image URL or base64 data. |
The maximum number of options is cols * rows. If the grid dimensions are reduced, options beyond the new maximum are trimmed automatically.
Option structure
Each option in the options array has the following shape:
| Property | Type | Description |
|---|---|---|
| value | string | The programmatic value stored in submission data (e.g. "image-1") |
| label | string | The image URL or base64 data:image/... string |
Validation
The Icon Select field extends InputFieldBase, so the required toggle is available. When required, the user must click one of the image tiles before the form can be submitted.
Example Usage
A 2x3 product color picker:
{
"type": "iconSelect",
"label": "Choose a color",
"required": true,
"aspect": "1:1",
"cols": 3,
"rows": 2,
"options": [
{ "value": "red", "label": "https://example.com/red.png" },
{ "value": "blue", "label": "https://example.com/blue.png" },
{ "value": "green", "label": "https://example.com/green.png" },
{ "value": "black", "label": "https://example.com/black.png" },
{ "value": "white", "label": "https://example.com/white.png" },
{ "value": "gray", "label": "https://example.com/gray.png" }
]
}