Formularios

Estado: Beta

Interruptor

Para preferencias de sí o no (recordatorios, lista de espera automática). Es un checkbox nativo con role="switch", así que manda su valor en el formulario y funciona sin JS; encima, el pulgar se estira al presionarlo y viaja al otro lado con un pequeño rebote.

Preferencias

app/views/… (la demo de arriba)

<div class="w-full max-w-sm">
  <p class="eui-label mb-2.5 px-1">Preferencias</p>
  <div class="divide-y divide-border-subtle rounded-xl border border-border bg-card px-4">
    <div class="py-3.5">
      <%= render Ui::SwitchComponent.new(name: "preferences[email_reminders]", checked: true, id: "switch-demo-reminders",
                                         label: "Recordatorios por correo",
                                         description: "Te avisamos 2 horas antes de tu clase.") %>
    </div>
    <div class="py-3.5">
      <%= render Ui::SwitchComponent.new(name: "preferences[auto_waitlist]", id: "switch-demo-waitlist",
                                         label: "Unirme a la lista de espera automáticamente",
                                         description: "Si la clase se llena, te apartamos el siguiente lugar que se libere.") %>
    </div>
  </div>
</div>

Qué hace

  • Toda la fila (etiqueta y descripción) es el <label>: se toca en cualquier parte.
  • El pulgar se estira al presionar y se alarga con la velocidad del viaje.
  • Viaja con el resorte "responsive"; el riel cambia de color con duration-calm.
  • Dispara el change nativo del checkbox; escúchalo para autoguardar con Turbo.

Props

Nombre Tipo Default Descripción
label String — Texto visible y nombre accesible.
hint String nil Ayuda debajo de la etiqueta (aria-describedby; description: es su nombre anterior).
name String nil Nombre del campo en el formulario.
form / attribute FormBuilder / Symbol nil name, id y checked salen del modelo.
checked Boolean false Estado inicial.
value / unchecked_value String "1" / "0" Lo que se envía encendido y apagado (campo oculto, como check_box). nil quita el oculto.
disabled Boolean false Deshabilita el control y su campo oculto.
size :sm | :md :md :sm es el tamaño compacto (36×20).

Accesibilidad