Combobox Caixa de Combinação
Introdução
Um controle de entrada com autocompletar que combina uma caixa de texto com uma caixa de lista suspensa (listbox), permitindo que os usuários filtrem e selecionem opções de uma lista. Usado principalmente para feeds de opções longos, filtros de plataforma, tags e seleção de categorias.
O componente Combobox está totalmente integrado como um bloco interativo combobox no Page Builder, permitindo que autores de conteúdo e desenvolvedores configurem facilmente rótulos de entrada, espaços reservados, listas de itens predefinidas e configurações de interação diretamente dentro do CMS.
Uso
Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam componentes combobox interativos.
1. Filtro de tecnologia padrão (seleção interativa)
Uma combobox pesquisável padrão pré-carregada com opções, permitindo que os usuários filtrem ou selecionem diretamente suas opções alvo.
{
"type": "combobox",
"label": "Preferred Tech Stack",
"placeholder": "Select a Framework",
"items": [
{ "label": "React", "value": "react" },
{ "label": "Solid", "value": "solid" },
{ "label": "Svelte", "value": "svelte" },
{ "label": "Vue", "value": "vue" },
{ "label": "Hono", "value": "hono" }
],
"interactive": true
}
2. Pesquisa de opções limpáveis (itens personalizados)
Possui uma ação de limpeza acompanhante, permitindo que os usuários removam as opções selecionadas com um único clique. Ideal para pesquisas de plataforma, locais ou listas de seleção de países.
{
"type": "combobox",
"label": "Country Selection",
"placeholder": "Search countries...",
"items": [
{ "label": "United States", "value": "us" },
{ "label": "Germany", "value": "de" },
{ "label": "France", "value": "fr" },
{ "label": "United Kingdom", "value": "uk" },
{ "label": "Canada", "value": "ca" }
],
"allowClear": true,
"interactive": true
}
3. Campo de entrada desabilitado
Demonstra um campo de autocompletar temporariamente bloqueado. Isso preserva os rótulos e seleções atuais, mas impede a digitação, a filtragem ou a ativação do menu suspenso.
{
"type": "combobox",
"label": "Select Database Engine",
"placeholder": "Temporarily unavailable",
"items": [],
"disabled": true,
"interactive": true
}
Propriedades
| Propriedade | Tipo de campo CMS | Padrão | Descrição / opções suportadas |
|---|---|---|---|
Texto do rótulo (label) | string | - | Texto visual acompanhante posicionado acima da caixa de pesquisa de autocompletar. |
Espaço reservado (placeholder) | string | - | Exibido dentro da caixa de entrada quando nenhum item está selecionado. |
Botão de limpar (allowClear) | boolean | false | Quando true, renderiza um botão de limpar alinhado à direita dentro da entrada de texto para redefinir facilmente a seleção. |
Desabilitado (disabled) | boolean | false | Congela as entradas de pesquisa do usuário, os pop-ups suspensos e as ativações por clique. |
Lista de itens (items) | list | [] | Um array ordenado de entradas de objeto que representam seleções de lista (veja as subpropriedades da lista abaixo). |
Propriedades dos itens de lista (items)
| Subpropriedade | Tipo | Obrigatório | Descrição |
|---|---|---|---|
Rótulo (label) | string | Sim | Nome de exibição renderizado nas opções pop-up da lista. |
Valor (value) | string | Sim | Identificador de string único capturado nos bastidores ao selecionar uma opção. |
Opção desabilitada (disabled) | boolean | Não | Esmaece/trava uma única opção de seleção dentro do feed suspenso. |
Notas para desenvolvedores e acessibilidade
- Hidratação adaptativa inteligente (Nível 2): Para otimizar a velocidade inicial da página, a Combobox compila para marcação HTML/CSS estática e sem JS nas cargas do servidor, baixando payloads JS interativos apenas quando sinais personalizados são fornecidos ou quando
"interactive": trueé passado explicitamente. - Listboxes acessíveis: O componente opera em completo alinhamento com as funções de acessibilidade combobox do WAI-ARIA. Saltos de foco, seleções de opções por teclas de seta e ativações por teclado ocorrem nativamente, prontas para uso.
- Envios de formulário unificados: Os valores selecionados são mapeados diretamente para solicitações POST de formulário padrão, evitando que os desenvolvedores precisem vincular programaticamente os estados de seleção à lógica de envio personalizada global.