Formularios

Estado: Beta

Campo de color

Para el color de marca del estudio y el color de las variantes de la tienda. Las muestras son radios con un aro que viaja con resorte; el selector del sistema y el código hex (el valor real, con su name) se mueven juntos. La vista previa enseña una pastilla con el color y, para la marca, el contraste con texto blanco y negro y su nivel (AAA, AA, AA grande o insuficiente), calculado al momento.

Reservar clase
Con blanco
2.9:1 Insuficiente
Con negro
6.0:1 AA

Botones y ligas de los correos que reciben tus alumnos.

app/views/… (la demo de arriba)

<%# El color de marca del estudio (con contraste) y, en el escenario grande, el color de una variante de la tienda. %>
<div class="@container w-full">
  <div class="mx-auto grid w-full max-w-sm gap-6">
    <%= render Ui::ColorFieldComponent.new(label: "Color de marca", name: "settings[brand_color]", value: "#a3946b", contrast: true, required: true,
          swatches: [ [ "Oro", "#a3946b" ], [ "Terracota", "#c1553d" ], [ "Salvia", "#6f8a5e" ], [ "Ciruela", "#6b3f5a" ], [ "Océano", "#2b4a6f" ], [ "Carbón", "#2b2b2b" ] ],
          hint: "Botones y ligas de los correos que reciben tus alumnos.") %>

    <div class="hidden @lg:block">
      <%= render Ui::ColorFieldComponent.new(label: "Color de la variante", name: "product[variants_attributes][0][color]", value: "#d6c7a1", optional: true,
            sample: "Leggings de yoga",
            swatches: [ [ "Arena", "#d6c7a1" ], [ "Salvia", "#9caf88" ], [ "Carbón", "#2b2b2b" ], [ "Terracota", "#c1553d" ], [ "Rosa polvo", "#e8a0bf" ], [ "Blanco", "#ffffff" ] ]) %>
    </div>
  </div>
</div>

Qué hace

  • Muestras, selector nativo y hex van sincronizados; todos disparan input/change reales en el campo hex.
  • El aro de la muestra elegida viaja con resorte y aparece con un pop.
  • La pastilla usa el texto que mejor se lee sobre el color (blanco o negro).
  • Contraste WCAG 2 en vivo: AAA (7:1), AA (4.5:1), AA grande (3:1) o insuficiente.
  • El hex se normaliza al salir (c53 →

Props

Nombre Tipo Default Descripción
label String — Etiqueta (Ui::FieldComponent), enlazada al campo hex.
name String nil Nombre del campo hex. Con form + attribute sale del form builder.
form / attribute FormBuilder / Symbol nil Toma name, id, valor y error del modelo.
value String nil Color inicial (#c1553d, c1553d o #c53).
swatches { label => hex } | [[label, hex]] [] Muestras predefinidas: un hash { "Terracota" => "#c1553d" } o pares.
contrast Boolean false Muestra el contraste con texto blanco y negro (WCAG 2).
clearable Boolean !required Botón "Quitar color" para dejarlo vacío.
sample String "Reservar clase" Texto de la pastilla de vista previa.
hint / error / required / optional — — Los de Ui::FieldComponent.

Accesibilidad