Formularios

Estado: Beta

Select con resorte

Para elegir entre opciones que necesitan una línea de contexto (tipo de clase, sala, plan). La lista entra con resorte desde el disparador, una pastilla de resaltado se desliza a la opción bajo el cursor o el teclado y el chevron gira. Teclado completo, búsqueda por tecleo y el valor viaja en un campo oculto con su name.

Tipo de clase

Te mostramos los horarios de ese tipo de clase.

app/views/… (la demo de arriba)

<div class="w-full max-w-xs">
  <%= render Ui::SpringSelectComponent.new(name: "reservation[class_type]", id: "spring-select-demo",
                                           label: "Tipo de clase", selected: "reformer",
                                           options: [
                                             [ "Vinyasa", "vinyasa", "Flujo dinámico guiado por la respiración" ],
                                             [ "Reformer", "reformer", "Pilates en máquina, grupos de 8" ],
                                             [ "Barre", "barre", "Fuerza y postura con barra de ballet" ],
                                             [ "Meditación", "meditacion", "30 minutos para bajar el ritmo" ]
                                           ]) %>
  <p class="mt-2 text-xs text-muted-foreground">Te mostramos los horarios de ese tipo de clase.</p>
</div>

Qué hace

  • La lista entra con el resorte "responsive" (escala + opacidad desde el disparador) y sale con "snappy".
  • La pastilla de resaltado persigue la opción activa; la elegida lleva palomita.
  • Vive en la capa superior (popover): ninguna tarjeta con overflow la recorta; si abajo no cabe, abre hacia arriba.
  • Al elegir dispara change en el campo oculto (burbujea) y spring-select:change con { value, label }.

Props

Nombre Tipo Default Descripción
options [[label, value, description], …] — Opciones; value y description son opcionales (value = label).
name String nil Nombre del campo oculto con el valor elegido.
form / attribute FormBuilder / Symbol nil name y selected salen del modelo.
selected String nil value de la opción elegida al cargar.
placeholder String "Elige una opción" Texto mientras no hay valor (y nombre accesible si no hay label).
label String nil Etiqueta visible encima del disparador.
disabled Boolean false Deshabilita el control y su campo oculto.

Accesibilidad