Select Selector
Introduction
Un control de selección desplegable personalizado que permite a los usuarios elegir una o varias opciones de una lista predefinida. Este componente sirve como una alternativa totalmente accesible, estilizable y responsive al elemento <select> nativo del navegador.
El componente Select está totalmente integrado como bloque select en el Page Builder, permitiendo a autores y desarrolladores configurar fácilmente opciones visuales, marcadores de posición, tamaños, selección múltiple y temas de color directamente en el CMS.
Usage
Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran menús desplegables interactivos.
1. Selección estándar de una opción
Una lista desplegable estándar de una opción que permite seleccionar el framework preferido. Incluye una etiqueta y un texto de marcador de posición 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. Selección múltiple con estilo personalizado (variante Surface)
Demuestra cómo habilitar múltiples selecciones activas, mostrando las etiquetas disparadoras separadas por comas. También muestra una 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. Selector desplegable deshabilitado
Muestra un elemento select temporalmente no disponible o de solo lectura. Este estado deshabilita todas las interacciones, impidiendo que la lista se abra o reciba el foco.
{
"type": "select",
"label": "Language Settings",
"placeholder": "Select Language",
"disabled": true,
"interactive": true,
"items": [
{ "label": "English", "value": "en" },
{ "label": "Deutsch", "value": "de" }
]
}
Props
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / opciones admitidas |
|---|---|---|---|
Texto de etiqueta (label) | string | - | Texto descriptivo sobre el disparador del desplegable. |
Marcador de posición (placeholder) | string | - | Texto fantasma dentro del botón cuando no hay selección. |
Lista de opciones (items) | list | - | Lista de opciones con label, value y opcional disabled. |
Selección múltiple (multiple) | boolean | false | Al activarse, permite varias opciones; el menú se mantiene abierto. |
Valor predeterminado (defaultValue) | list | - | Valores preseleccionados al cargar. |
Deseleccionable (deselectable) | boolean | false | Permite limpiar la selección única volviendo a hacer clic. |
Nombre del formulario (name) | string | - | Atributo name HTML estándar para envíos de formulario. |
Deshabilitado (disabled) | boolean | false | Desactiva la interacción y aplica una capa atenuada. |
Estado inválido (invalid) | boolean | false | Activa bordes de error y estado visual inválido. |
Variante visual (variant) | select | "outline" | Tema de borde y relleno del disparador. • Opciones: "outline", "surface". |
Escala de tamaño (size) | select | "md" | Controla espaciado, padding y tamaño de fuente. • Opciones: "xs", "sm", "md", "lg", "xl". |
Forzar interactivo (interactive) | boolean | true | Hidrata el disparador y el menú como isla interactiva. |
Developer Notes & Accessibility
- Isla de hidratación: Como Select requiere JavaScript del cliente para alternar menús, filtrar opciones y enlazar teclas, se hidrata por defecto como una isla interactiva de Preact (
"interactive": true). - Cumplimiento WAI-ARIA: El componente actúa como una combobox semántica personalizada de alta fidelidad. El foco permanece en el botón disparador (
role="combobox"), y las opciones se gestionan víaaria-activedescendant,aria-expandedyaria-controls. Las flechas,Home/EndyEscapefuncionan de inmediato. - Integración de formularios: Emite un
<select>nativo oculto con<option>coincidentes. Los envíos HTTP POST estándar funcionan de forma nativa sin serialización de estado JS.