Selector (picker)

Un selector enriquecido sobre un <select> normal. El servidor envía el control nativo, que funciona en cualquier sitio y se envía con el formulario. En init se conserva como fuente de verdad y se oculta a la vista; la persona ve un control que abre una lista con búsqueda, muestra los valores elegidos como chips cuando el select es multiple, respeta grupos y opciones desactivadas y se sincroniza en ambos sentidos con el elemento nativo. destroy devuelve el select exactamente como se sirvió.

CSS: css/components/picker.css sobre form.css (ambos en ivolt.css). JS: @intervolutions/ivolt/picker o auto.js. Añadido en la v0.3.

Todo select.iv-select se enriquece por defecto cuando corre init o auto.js: un select suelto recibe una raíz generada que destroy retira, y las opciones data-iv-* escritas en el select pasan a ella. Añade data-iv-native al select, o a un antecesor, para mantener el control nativo.

Un selector con búsquedafixtures/picker/basic.htmlAbrir sola

<div class="iv-field" style="max-width: 22rem">
  <label class="iv-label" for="p-city">Delivery city</label>
  <div class="iv-picker" data-iv-component="picker">
    <select class="iv-select" id="p-city" name="city" aria-describedby="p-city-help">
      <option value="">Select a city</option>
      <option value="bcn">Barcelona</option>
      <option value="bio">Bilbao</option>
      <option value="cor">Córdoba</option>
      <option value="grx">Granada</option>
      <option value="mad">Madrid</option>
      <option value="agp">Málaga</option>
      <option value="svq">Seville</option>
      <option value="vlc">Valencia</option>
      <option value="zaz" disabled>Zaragoza (no service yet)</option>
    </select>
  </div>
  <p class="iv-field__help iv-u-m-0" id="p-city-help">Sample data, not a real service. Without JavaScript this is the native <code>&lt;select&gt;</code>; with JavaScript it becomes a searchable listbox. Nine options, so the search field appears on its own.</p>
</div>

Valores múltiples, grupos y límite

Con multiple el control muestra chips, cada uno con su botón para quitarlo; Retroceso quita el último. data-iv-max-items desactiva el resto de opciones al alcanzar el límite. El segundo ejemplo usa la variante iv-picker--glass.

Varios valores, grupos y un límitefixtures/picker/multiple.htmlAbrir sola

<div class="iv-stack">
  <div class="iv-field" style="max-width: 26rem">
    <label class="iv-label" for="p-langs">Languages you write in</label>
    <div class="iv-picker" data-iv-component="picker" data-iv-max-items="3">
      <select class="iv-select" id="p-langs" name="langs" multiple aria-describedby="p-langs-help">
        <optgroup label="Romance">
          <option value="es" selected>Spanish</option>
          <option value="ca">Catalan</option>
          <option value="fr">French</option>
          <option value="pt">Portuguese</option>
          <option value="it">Italian</option>
        </optgroup>
        <optgroup label="Germanic">
          <option value="en" selected>English</option>
          <option value="de">German</option>
          <option value="nl">Dutch</option>
          <option value="sv" disabled>Swedish (editor missing)</option>
        </optgroup>
      </select>
    </div>
    <p class="iv-field__help iv-u-m-0" id="p-langs-help">Sample data, not a real profile. Up to three languages: once you pick the third, the rest are announced as unavailable. Chips can be removed one by one, and Backspace removes the last one.</p>
  </div>

  <div style="max-width: 26rem; padding: var(--iv-space-6); border-radius: var(--iv-radius-lg); background-image: linear-gradient(135deg, var(--iv-color-primary-subtle), var(--iv-color-info-subtle))">
    <div class="iv-field">
      <label class="iv-label" for="p-tags">Project tags (glass variant)</label>
      <div class="iv-picker iv-picker--glass" data-iv-component="picker" data-iv-search="on" data-iv-search-placeholder="Filter tags" data-iv-empty-text="No tag matches" data-iv-close-on-select="true">
        <select class="iv-select" id="p-tags" name="tags" multiple aria-describedby="p-tags-help">
          <option value="brand">Brand</option>
          <option value="design" selected>Design system</option>
          <option value="docs">Documentation</option>
          <option value="research">Research</option>
          <option value="tooling">Tooling</option>
        </select>
      </div>
      <p class="iv-field__help iv-u-m-0" id="p-tags-help">Sample data, not a real backlog. The same control on a frosted surface; this one closes the popover after every pick.</p>
    </div>
  </div>
</div>

// data-iv-component="picker"
{
  maxItems: 3,
  search: "on",
  searchPlaceholder: "Filter tags",
  emptyText: "No tag matches",
  closeOnSelect: true,
}

Opciones

Opción	Atributo	Por defecto	Efecto
`search`	`data-iv-search`	`auto`	Campo de búsqueda en la lista: `auto` lo muestra con más de siete opciones; `on` u `off` lo fuerzan.
`placeholder`	`data-iv-placeholder`	primera opción vacía	Texto que se muestra cuando no hay nada seleccionado.
`searchPlaceholder`	`data-iv-search-placeholder`	`Search`	Placeholder del campo de búsqueda.
`emptyText`	`data-iv-empty-text`	`No matches`	Fila que aparece cuando la búsqueda no coincide con nada.
`clearable`	`data-iv-clearable`	`true`	Muestra un botón para vaciar cuando hay valor.
`closeOnSelect`	`data-iv-close-on-select`	`true` / `false`	Cierra al elegir; por defecto sí en simple y no en múltiple.
`maxItems`	`data-iv-max-items`	`0`	Número máximo de valores en un select múltiple; `0` significa sin límite.
`countText`	`data-iv-count-text`	`{count} selected`	Texto del control en múltiple cuando hay chips.

Métodos y eventos

open(), close(), toggle(), select(value), deselect(value), clear(), destroy(); lectura de value (una cadena, o un array en múltiple), isOpen, native y optionElements. Eventos en el elemento raíz: iv:open/iv:close (cancelables) y después iv:opened/iv:closed; iv:change (cancelable, detail.value, added, removed) y después iv:changed. El select nativo también recibe input y change, así que el código de formulario existente sigue funcionando.

Teclado y tecnología asistiva

En el control: Abajo, Enter o Espacio abren la lista, escribir abre y filtra cuando hay búsqueda, Retroceso quita el último chip. En la lista: Arriba y Abajo se mueven con envoltura y saltan las opciones desactivadas, Inicio y Fin saltan a los extremos, Enter o Espacio seleccionan (en múltiple alternan sin cerrar), Escape cierra y devuelve el foco al control, Tab cierra. El control sigue el patrón de combobox de solo selección con un listbox; la opción resaltada se expone con aria-activedescendant, y el botón de cada chip tiene nombre accesible.

Sin JavaScript

El select nativo se muestra como siempre, con el estilo de form.css. Grupos, opciones desactivadas y selección múltiple son funciones nativas, así que no se pierde nada.

Errores frecuentes

Leer el valor del selector en vez del select: el formulario envía el elemento nativo, así que lee de él o escucha su change.
Miles de opciones: la lista se pinta entera. Reduce los datos en el servidor.
Omitir la <label for>: el control toma su nombre de la etiqueta.

Índice de clases

Partes y modificadores de esta familia que los ejemplos de arriba no muestran. La lista completa por hoja está en la referencia.

Clase	Qué hace
`iv-picker__value`	Texto que muestra el control cerrado: la selección o el marcador.
`iv-picker__placeholder`	Modificador de ese texto mientras no hay selección.
`iv-picker__caret`	Flecha del control, dibujada con una máscara.
`iv-picker__chip-label`	Etiqueta dentro de una ficha de un selector múltiple.
`iv-picker__group-list`	Lista de opciones dentro de un grupo.

Todos los componentes de contenido

Todos los componentes interactivos

Navegar