ImageCheck

The ImageCheck component renders a grid of selectable images for forms. It supports single selection (radio) and multiple selection (checkbox), with regular images or circular avatars.

Basic Usage (Single Select)

Bind the selected value via v-model. Single select (radio) is the default mode.

<script setup>
const demoVal = ref('img1')
const imageOptions = [
  { image: '...', value: 'img1' },
  { image: '...', value: 'img2' },
  { image: '...', value: 'img3' },
  { image: '...', value: 'img4' },
]
</script>

<template>
  <TImageCheck v-model="demoVal" :options="imageOptions" />
</template>

Multiple Selection

Set multiple to enable checkbox mode. The bound value becomes an array.

<TImageCheck v-model="selected" multiple :options="imageOptions" />

Avatar Mode

Use the avatar field instead of image to display circular avatar-style options.

<TImageCheck v-model="selected" :options="[
  { avatar: 'https://i.pravatar.cc/150?u=a', value: 'a' },
  { avatar: '/avatar.png', value: 'b' },
  { avatar: 'https://i.pravatar.cc/150?u=c', value: 'c' },
  { avatar: 'https://i.pravatar.cc/150?u=d', value: 'd' },
]" />

Grid Columns

Use cols to control the number of items per row (1-6). Items auto-arrange when cols is not set.

<TImageCheck v-model="selected" :cols="4" :options="imageOptions" />

Custom Content (Slot)

Use the default slot with TImageCheckItem children for full control over each option. Each item must be wrapped in a div.col-auto for proper grid layout.

<TImageCheck v-model="selected">
  <div class="col-auto">
    <TImageCheckItem value="s1" image="..." />
  </div>
  <div class="col-auto">
    <TImageCheckItem value="s2" avatar="..." />
  </div>
</TImageCheck>

API

TImageCheck Props

Prop	Description	Type	Default
v-model	Selected value (any for single, array for multi)	any | any[]	undefined
multiple	Enable multiple selection (checkbox)	boolean	false
disabled	Disable all items	boolean	false
name	Group name for inputs	string	undefined
cols	Items per row (1-6)	number	undefined
aspectRatio	Image container aspect ratio, e.g. '4/3', '16/9'	string	'1 / 1'
options	Array of options	ImageCheckOption[]	undefined

ImageCheckOption

Field	Description	Type	Default
image	Image URL	string	undefined
avatar	Avatar background image (higher priority than image)	string	undefined
value	Selected value	any	image or avatar
disabled	Disable this item	boolean	false

TImageCheckItem Props

Prop	Description	Type	Default
value	Option value	any	— (required)
image	Image URL	string	undefined
avatar	Avatar background image	string	undefined
disabled	Disable this item	boolean	false

Events

Event	Description	Parameters
change	Emitted when the selection changes	value: any