Image Button
proClickable image/color tile selector for single or multi-select.
Overview
The Image Button displays options as clickable image or solid-color tiles. Users click to select. Supports single-select (radio behavior) or multi-select (checkbox behavior) modes with a selection ring effect.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
name | String | "imageButton" | Field name used in form data. |
options | Array | -- | List of options with label, value, fillType (image/color), image, and color. |
layout | Enum | "horizontal" | "horizontal" or "vertical" option layout. |
gap | Number | 16 | Gap between options in pixels. |
selectionType | Enum | "single" | "single" (one selection) or "multiple" (multi-select). |
Features
- Image or solid color fill per option
- Single or multi-select modes
- Selection ring effect with configurable gap
- Toggle-deselect behavior
- Multi-select stores comma-separated values
Tips
Each option can independently be an image or a solid color.
Use for visual product variant selectors (e.g., t-shirt colors, design options).
The ring gap creates a visual ring effect around selected items.