> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Usar blocos de escolha por imagem para seleção visual

> Use blocos de escolha por imagem para criar seleções visuais, aumentar o engajamento e capturar as preferências dos usuários em funis interativos.

O **bloco Image Choice** (escolha por imagem) funciona como o Multiple Choice, mas usa **imagens em vez de texto**, o que o torna mais envolvente e facilita a decisão visual dos usuários.

***

## Configurações gerais

### Name

* Nome de campo único usado para armazenar e enviar os dados
* Pode ser reutilizado como variável

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/2fKNopSGUABbSt57/images/Group58.png?fit=max&auto=format&n=2fKNopSGUABbSt57&q=85&s=343223d7680ced7f37d2c1a052d08c21" alt="Grupo 58" width="1470" height="833" data-path="images/Group58.png" />
</Frame>

### Label

* Texto opcional de contexto exibido acima do bloco

### Options

Cada opção inclui:

* **Image** → Envie ou selecione uma imagem
* **Display Name** → Rótulo visível
* **Value** → Enviado ao seu CRM

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/2fKNopSGUABbSt57/images/CRM.png?fit=max&auto=format&n=2fKNopSGUABbSt57&q=85&s=e551ffae531324af2059de0f7cffcad7" alt="CRM" width="1470" height="833" data-path="images/CRM.png" />
</Frame>

## Configurações

* **Allow Multiple Selection** → Permite selecionar várias imagens
  * Exige um botão para continuar
* **Sort Alphabetically**
* **Reverse Order**
* **Randomize**

## Navegação e validação

* **Navigation** → Define as próximas etapas ou fluxos condicionais
* **Validation** → Exige pelo menos uma seleção

## Decoradores (Decorators)

* **Multiple Selection Separator** → Define como os valores são armazenados
* **Help Text** → Adiciona orientações abaixo do bloco

## Espaçamento

* **Size** → S, M, L, Full width
* **Margin** → Ajusta o espaçamento ao redor do bloco

## Aparência

* **Layout Type** → Grid ou List
* **Items per Row (Desktop & Mobile)**
* **Opções de alinhamento**
* **Visibility** → Desktop / Mobile

## Design

* **Presets** → Estilos predefinidos
* **Advanced Settings** → Personalize:
  * Estado padrão (Default)
  * Estado ao passar o mouse (Hover)
  * Estado selecionado (Selected)
  * Bordas, espaçamento, tamanho da mídia