Select Seletor
Introduction
Um controle de seleção suspensa personalizado que permite aos usuários escolher uma ou mais opções de uma lista predefinida. Este componente serve como uma alternativa totalmente acessível, estilizável e responsiva ao elemento <select> nativo do navegador.
O componente Select está totalmente integrado como bloco select no Page Builder, permitindo que autores e desenvolvedores configurem facilmente opções visuais, espaços reservados, tamanhos, seleção múltipla e temas de cor diretamente no CMS.
Usage
Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam menus suspensos interativos.
1. Seleção padrão de uma opção
Uma lista suspensa padrão de uma opção que permite selecionar o framework preferido. Inclui um rótulo e um texto de espaço reservado personalizados.
{
"type": "select",
"label": "Framework",
"placeholder": "Select a framework",
"interactive": true,
"items": [
{ "label": "React", "value": "react" },
{ "label": "Solid", "value": "solid" },
{ "label": "Svelte", "value": "svelte", "disabled": true },
{ "label": "Vue", "value": "vue" },
{ "label": "Hono", "value": "hono" }
]
}
2. Seleção múltipla com estilo personalizado (variante Surface)
Demonstra como habilitar múltiplas seleções ativas, exibindo as etiquetas do gatilho separadas por vírgulas. Também mostra uma variante visual surface distinta.
{
"type": "select",
"label": "CSS Frameworks",
"placeholder": "Choose frameworks",
"multiple": true,
"variant": "surface",
"size": "lg",
"defaultValue": ["panda"],
"interactive": true,
"items": [
{ "label": "Tailwind CSS", "value": "tailwind" },
{ "label": "Panda CSS", "value": "panda" },
{ "label": "Vanilla Extract", "value": "vanilla" }
]
}
3. Seletor suspenso desabilitado
Mostra um elemento select temporariamente indisponível ou somente leitura. Este estado desabilita todas as interações, impedindo que a lista seja aberta ou receba foco.
{
"type": "select",
"label": "Language Settings",
"placeholder": "Select Language",
"disabled": true,
"interactive": true,
"items": [
{ "label": "English", "value": "en" },
{ "label": "Deutsch", "value": "de" }
]
}
Props
| Propriedade | Tipo de campo CMS | Padrão | Descrição / opções suportadas |
|---|---|---|---|
Texto do rótulo (label) | string | - | Texto descritivo acima do gatilho. |
Espaço reservado (placeholder) | string | - | Texto fantasma no botão quando nada é selecionado. |
Lista de opções (items) | list | - | Lista de opções com label, value e disabled opcional. |
Seleção múltipla (multiple) | boolean | false | Quando ativo, permite várias opções; o menu permanece aberto. |
Valor padrão (defaultValue) | list | - | Valores pré-selecionados ao carregar. |
Desselecionável (deselectable) | boolean | false | Permite limpar a seleção única clicando novamente. |
Nome do formulário (name) | string | - | Atributo name HTML padrão para envios. |
Desabilitado (disabled) | boolean | false | Desativa a interação e aplica camada atenuada. |
Estado inválido (invalid) | boolean | false | Ativa bordas de erro e estado inválido. |
Variante visual (variant) | select | "outline" | Tema de borda e preenchimento do gatilho. • Opções: "outline", "surface". |
Escala de tamanho (size) | select | "md" | Controla espaçamento, padding e tamanho de fonte. • Opções: "xs", "sm", "md", "lg", "xl". |
Forçar interativo (interactive) | boolean | true | Hidrata o gatilho e o menu como ilha interativa. |
Developer Notes & Accessibility
- Ilha de hidratação: Como o Select requer JavaScript do cliente para alternar menus, filtrar opções e vincular teclas, é hidratado por padrão como uma ilha interativa de Preact (
"interactive": true). - Conformidade WAI-ARIA: O componente atua como uma combobox semântica personalizada de alta fidelidade. O foco permanece no botão gatilho (
role="combobox"), e as opções são gerenciadas viaaria-activedescendant,aria-expandedearia-controls. As setas,Home/EndeEscapefuncionam imediatamente. - Integração de formulário: Emite um
<select>nativo oculto com<option>correspondentes. Os envios HTTP POST padrão funcionam nativamente sem serialização de estado JS.