Formularios

Estado: Beta

Casilla que se dibuja

Una casilla de verdad (manda su valor en el formulario, funciona con teclado y lector de pantalla) vestida para sentirse: la caja cede al presionarla, hace un pequeño pop al marcarse y la palomita se dibuja con un trazo. Toda la fila, con su descripción, se puede tocar.

app/views/… (la demo de arriba)

<div class="flex w-full max-w-xs flex-col gap-4">
  <%= render Ui::CheckboxComponent.new(name: "checkbox_demo[reglamento]", label: "Acepto el reglamento del estudio",
                                       description: "Llega 10 minutos antes y cancela con 12 horas.") %>
  <%= render Ui::CheckboxComponent.new(name: "checkbox_demo[recordatorio]", label: "Recordarme 2 horas antes", checked: true) %>
  <%= render Ui::CheckboxComponent.new(name: "checkbox_demo[lista]", label: "Unirme a la lista de espera", disabled: true) %>
</div>

Qué hace

  • Sin JavaScript: el <input> es la caja (appearance: none) y todo pasa en CSS.
  • La palomita se dibuja con stroke-dashoffset (pathLength=1) y se asienta con ease-settle.
  • El pop solo corre cuando la persona la toca (:user-valid), no al cargar la página.
  • Las esquinas siguen el dial de redondez; los colores, la luz del estudio.

Props

Nombre Tipo Default Descripción
name String nil Nombre del campo que se envía.
form / attribute FormBuilder / Symbol nil name, id y checked salen del modelo, con el oculto "0".
value String "1" Valor que se envía marcada.
checked Boolean false Marcada al cargar.
disabled Boolean false Deshabilita la casilla y atenúa la fila.
label String nil Etiqueta; es el nombre accesible. Sin etiqueta, pasa aria: { label: … }.
hint String nil Texto de ayuda bajo la etiqueta (aria-describedby; description: es su nombre anterior).
unchecked_value String nil Con "0" agrega el campo oculto de Rails para mandar la casilla desmarcada.
**attrs Hash {} id, required, form, aria, data… van al <input>; class: va a la fila.

Accesibilidad