Formularios

Select

Elige uno o varios valores de una lista cerrada. A diferencia del autocompletado, la lista no se escribe ni se filtra: se recorre entera.

Uso

<vadavo-select> recibe sus valores como hijos option, reunidos en un optgroup cuando forman una rama. Se leen una sola vez como datos, no se muestran directamente: el propio elemento genera el disparador y el panel dentro de su shadow root, sobre el mismo dropdown que usa el menú, así que el panel es igual, plano o en cascada.

El texto del option es la etiqueta y su atributo value lo que se envía; sin value se envía la etiqueta. El atributo selected marca la selección de partida, y la propiedad value la sustituye. placeholder es lo que muestra el disparador mientras no hay nada elegido, y open lo muestra ya desplegado.

Participa en FormData como un campo nativo y acepta name, required y disabled.

Selección simple

Elegir una fila sustituye a la anterior y cierra el panel.

<vadavo-select name="plan" placeholder="Elige un plan" open>
    <option value="little">Little WP</option>
    <option value="business" selected>Business WP</option>
    <option value="pro">Pro WP</option>
</vadavo-select>

Selección múltiple

Con el atributo multiple, una fila alterna en vez de sustituir y el panel sigue abierto. El disparador muestra la etiqueta cuando hay un solo valor elegido y el recuento cuando hay varios. El formulario recibe una entrada por valor, como un select multiple nativo; en JavaScript, la propiedad values da todos los valores elegidos y value el primero.

<vadavo-select name="extras" multiple placeholder="Añade extras" open>
    <option value="backup" selected>Copias de seguridad</option>
    <option value="ssl">Certificado SSL</option>
    <option value="cdn" selected>CDN</option>
</vadavo-select>

Selección en árbol

Un optgroup es una rama y sus option son sus hojas. La primera columna reúne las ramas y las opciones sueltas; el puntero sobre una rama abre la columna con sus opciones, sobre la misma superficie continua del menú en cascada.

El atributo data-value sobre la rama la hace además elegible: su fila se elige como cualquier otra, y abrir la columna no consume su clic. La rama sin data-value solo abre su columna, y data-selected la marca como selección de partida. El estándar da a optgroup solo label y disabled, así que lo que la rama lleva más allá de eso viaja en atributos data-*.

Al desplegarse, el panel llega abierto hasta la opción elegida, y vuelve a ella cuando el puntero sale del menú.

<vadavo-select name="producto" placeholder="Catálogo" open>
    <optgroup label="Hosting" data-value="hosting">
        <option value="wp">Hosting WordPress</option>
        <option value="es" selected>Hosting en España</option>
        <option value="correo">Hosting correo</option>
    </optgroup>
    <optgroup label="Dominios">
        <option value="registrar">Registrar</option>
        <option value="transferir">Transferir</option>
    </optgroup>
    <option value="cloud">Cloud</option>
</vadavo-select>