HTML + CSSCheckboxes
Borde que se vuelve relleno
El contorno redondo engorda hacia dentro hasta volverse un punto lleno y dentro asoma un check.
Ajustes
16px
1x
Código
<label class="uv-ck2m"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Suscribirme</label>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Checkboxes
Dónde usarlo
El anillo que se cierra sobre sí mismo resulta suave y redondo, y encaja con suscripciones amables: el «Suscribirme a la newsletter» al final de un checkout, el «Avísame» de la página de un evento o apuntarse a una lista de espera. Este checkbox redondo en CSS no tiene ni una esquina, así que casa con interfaces blanditas y alegres.
Un checkbox redondo se puede confundir con un radio. No lo mezcles con radios en el mismo formulario y escribe una etiqueta clara para que se entienda que se puede marcar más de uno.