# Campo

> Etiqueta, ayuda y error, conjuntos, fila con interruptor, tarjetas de opción, separadores y resumen de errores.

Categoría: Formularios · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usarlo

- En todo formulario: cada control con su etiqueta, ayuda y error.
- Los obligatorios no llevan marca; los opcionales dicen "(opcional)".
- El error va bajo el campo y dice cómo corregirlo.

## Formulario completo

```html
<div class="flex flex-wrap items-start justify-center gap-8"><form class="w-full max-w-xl space-y-8" novalidate><fieldset class="space-y-5"><legend class="text-base font-semibold">Datos de facturación</legend><p class="-mt-3 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Los usamos para emitir tus facturas.</p><div class=""><label for="f-rs" class="block text-sm font-medium mb-1.5">Razón social</label><input id="f-rs" value="Empresa de Ejemplo SpA" placeholder="" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" /></div><div class="grid sm:grid-cols-2 gap-5"><div class=""><label for="f-rut" class="block text-sm font-medium mb-1.5">RUT</label><input id="f-rut" value="76.123.456-7" placeholder="" aria-describedby="f-rut-h" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" /><div id="f-rut-h" class="text-xs mt-1.5 text-ccs-slate dark:text-ccs-dark-text-2">Con guion y dígito verificador.</div></div><div class=""><label for="f-giro" class="block text-sm font-medium mb-1.5">Giro</label><input id="f-giro" value="Comercio al por mayor" placeholder="" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" /></div></div></fieldset><hr class="border-ccs-line dark:border-ccs-dark-line" /><fieldset class="space-y-5"><legend class="text-base font-semibold">Dirección</legend><label class="flex items-start gap-3 text-sm cursor-pointer"><input type="checkbox" checked class="ccs-check w-4 h-4 rounded border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid mt-0.5" /><span>Usar la dirección de la empresa<span class="block text-xs text-ccs-slate dark:text-ccs-dark-text-2">Av. Ejemplo 1234, oficina 56</span></span></label><div class="grid sm:grid-cols-3 gap-5"><div class="sm:col-span-2"><label for="f-calle" class="block text-sm font-medium mb-1.5">Calle y número</label><input id="f-calle" value="Av. Ejemplo 1234" placeholder="" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" /></div><div class=""><label for="f-of" class="block text-sm font-medium mb-1.5">Oficina <span class="font-normal text-ccs-slate dark:text-ccs-dark-text-2">(opcional)</span></label><input id="f-of" value="56" placeholder="" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" /></div></div><div class="grid sm:grid-cols-2 gap-5"><div><label for="f-reg" class="block text-sm font-medium mb-1.5">Región</label><div class="relative"><select id="f-reg" class="w-full h-11 pl-4 pr-10 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25 appearance-none"><option>Metropolitana</option><option>Valparaíso</option><option>Biobío</option></select><iconify-icon icon="solar:alt-arrow-down-outline" class="shrink-0 text-[16px] absolute right-3 top-3.5 pointer-events-none text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon></div></div><div><label for="f-com" class="block text-sm font-medium mb-1.5">Comuna</label><div class="relative"><select id="f-com" class="w-full h-11 pl-4 pr-10 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25 appearance-none"><option>Providencia</option><option>Santiago</option><option>Las Condes</option></select><iconify-icon icon="solar:alt-arrow-down-outline" class="shrink-0 text-[16px] absolute right-3 top-3.5 pointer-events-none text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon></div></div></div></fieldset><hr class="border-ccs-line dark:border-ccs-dark-line" /><div><label for="f-com2" class="block text-sm font-medium mb-1.5">Comentarios <span class="font-normal text-ccs-slate dark:text-ccs-dark-text-2">(opcional)</span></label><textarea id="f-com2" rows="3" placeholder="Algo que debamos saber para facturar" class="w-full py-3 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25 resize-none"></textarea></div><div class="flex gap-2"><button type="submit"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm bg-ccs-blue text-white hover:bg-ccs-blue-mid shadow-ccs-sm dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue  active:scale-95 motion-reduce:active:scale-100">Guardar</button><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">Cancelar</button></div></form></div>
```

## Etiqueta, ayuda y error

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-sm space-y-6"><div class=""><label for="an-1" class="block text-sm font-medium mb-1.5">Correo</label><input id="an-1" value="" placeholder="nombre@empresa.cl" aria-describedby="an-1-h" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" /><div id="an-1-h" class="text-xs mt-1.5 text-ccs-slate dark:text-ccs-dark-text-2">Te enviaremos la confirmación.</div></div><div class=""><label for="an-2" class="block text-sm font-medium mb-1.5">Teléfono <span class="font-normal text-ccs-slate dark:text-ccs-dark-text-2">(opcional)</span></label><input id="an-2" value="" placeholder="+56 9 1234 5678" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" /></div><div class=""><label for="an-3" class="block text-sm font-medium mb-1.5">RUT</label><input id="an-3" value="76.123.4567" placeholder="" aria-describedby="an-3-e" aria-invalid="true" class="w-full h-11 px-4 rounded-lg border border-ccs-error-fill bg-ccs-error-soft bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-error dark:bg-ccs-dark-error-fill/10 dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" /><div id="an-3-e" class="text-xs text-ccs-error mt-1.5 inline-flex items-center gap-1 dark:text-ccs-dark-error"><iconify-icon icon="solar:close-circle-bold" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon>Formato inválido: usa 76.123.456-7</div></div></div></div>
```

## Fila con interruptor

```html
<div class="flex flex-wrap items-start justify-center gap-8"><label class="w-full max-w-md flex items-start justify-between gap-6 rounded-ccs border border-ccs-line dark:border-ccs-dark-line p-4 cursor-pointer"><span><span class="block text-sm font-medium">Verificación en dos pasos</span><span id="sw-d" class="block mt-0.5 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Te pediremos un código cada vez que entres desde un equipo nuevo.</span></span><span class="relative inline-flex shrink-0 w-11 h-6"><input type="checkbox" role="switch" name="dos-pasos" checked aria-describedby="sw-d" class="peer sr-only"/><span class="absolute inset-0 rounded-full bg-ccs-line-strong transition-colors peer-checked:bg-ccs-blue peer-focus-visible:ring-2 peer-focus-visible:ring-ccs-blue peer-focus-visible:ring-offset-2 motion-reduce:transition-none dark:bg-ccs-dark-line dark:peer-checked:bg-ccs-blue-mid dark:peer-focus-visible:ring-ccs-dark-accent dark:peer-focus-visible:ring-offset-ccs-dark-surface" aria-hidden="true"></span><span class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-ccs-sm transition-transform peer-checked:translate-x-5 motion-reduce:transition-none" aria-hidden="true"></span></span></label></div>
```

## Tarjetas de opción

```html
<div class="flex flex-wrap items-start justify-center gap-8"><fieldset class="w-full max-w-md"><legend class="block text-sm font-medium mb-1.5">Tipo de membresía</legend><div class="grid gap-3"><label class="flex items-start gap-3 rounded-ccs border p-4 cursor-pointer transition border-ccs-blue bg-ccs-bg ring-1 ring-ccs-blue dark:border-ccs-dark-accent dark:ring-ccs-dark-accent dark:bg-ccs-dark-surface"><input type="radio" name="mem" checked class="ccs-check w-4 h-4 rounded-full border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid mt-0.5" /><span><span class="block text-sm font-medium">Empresa</span><span class="block mt-0.5 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Para personas jurídicas. Incluye hasta 5 personas.</span></span></label><label class="flex items-start gap-3 rounded-ccs border p-4 cursor-pointer transition border-ccs-line dark:border-ccs-dark-line hover:border-ccs-line-strong dark:hover:border-ccs-dark-line-strong"><input type="radio" name="mem"  class="ccs-check w-4 h-4 rounded-full border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid mt-0.5" /><span><span class="block text-sm font-medium">Persona</span><span class="block mt-0.5 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Para personas naturales con giro comercial.</span></span></label></div></fieldset></div>
```

## Tarjetas con casillas

```html
<div class="flex flex-wrap items-start justify-center gap-8"><fieldset class="w-full max-w-md"><legend class="block text-sm font-medium mb-1.5">Avisos que quieres recibir</legend><div class="grid sm:grid-cols-2 gap-3"><label class="flex items-start gap-3 rounded-ccs border p-4 cursor-pointer transition border-ccs-blue bg-ccs-bg ring-1 ring-ccs-blue dark:border-ccs-dark-accent dark:ring-ccs-dark-accent dark:bg-ccs-dark-surface"><input type="checkbox" name="av" checked class="ccs-check w-4 h-4 rounded border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid mt-0.5" /><span><span class="block text-sm font-medium">Eventos</span><span class="block mt-0.5 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Inscripciones y recordatorios.</span></span></label><label class="flex items-start gap-3 rounded-ccs border p-4 cursor-pointer transition border-ccs-line dark:border-ccs-dark-line hover:border-ccs-line-strong dark:hover:border-ccs-dark-line-strong"><input type="checkbox" name="av"  class="ccs-check w-4 h-4 rounded border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid mt-0.5" /><span><span class="block text-sm font-medium">Estudios</span><span class="block mt-0.5 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Informes y boletines del sector.</span></span></label></div></fieldset></div>
```

## Grupo con separadores

```html
<div class="flex flex-wrap items-start justify-center gap-8"><fieldset class="w-full max-w-md"><legend class="text-base font-semibold">Avisos por correo</legend><div class="mt-2 divide-y divide-ccs-line dark:divide-ccs-dark-line"><label class="flex items-start gap-3 py-4 cursor-pointer"><input type="checkbox" checked class="ccs-check w-4 h-4 rounded border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid mt-0.5" /><span><span class="block text-sm font-medium">Respuestas</span><span class="block mt-0.5 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Cuando alguien responda una de tus solicitudes.</span></span></label><label class="flex items-start gap-3 py-4 cursor-pointer"><input type="checkbox" checked class="ccs-check w-4 h-4 rounded border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid mt-0.5" /><span><span class="block text-sm font-medium">Tareas</span><span class="block mt-0.5 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Cuando te asignen una tarea o se acerque su plazo.</span></span></label><label class="flex items-start gap-3 py-4 cursor-pointer"><input type="checkbox"  class="ccs-check w-4 h-4 rounded border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid mt-0.5" /><span><span class="block text-sm font-medium">Novedades</span><span class="block mt-0.5 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Una vez al mes, lo nuevo de la plataforma.</span></span></label></div></fieldset></div>
```

## Resumen de errores

```html
<div class="flex flex-wrap items-start justify-center gap-8"><form class="w-full max-w-md space-y-5" novalidate><div role="alert" tabindex="-1" aria-labelledby="sum-t" class="flex items-start gap-3 p-4 rounded-ccs bg-ccs-error-soft dark:bg-ccs-dark-error-fill/10 outline-none focus-visible:ring-2 focus-visible:ring-ccs-error-fill"><iconify-icon icon="solar:close-circle-bold" class="shrink-0 text-[20px] text-ccs-error dark:text-ccs-dark-error mt-0.5" aria-hidden="true"></iconify-icon><div><div id="sum-t" class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Revisa 2 campos antes de enviar</div><ul class="mt-1 text-sm list-disc pl-4 space-y-0.5 text-ccs-slate dark:text-ccs-dark-text-2"><li><a href="#s-rut" class="underline underline-offset-4 hover:text-ccs-ink dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">RUT: el formato no es válido</a></li><li><a href="#s-mail" class="underline underline-offset-4 hover:text-ccs-ink dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Correo: falta completarlo</a></li></ul></div></div><div class=""><label for="s-rs" class="block text-sm font-medium mb-1.5">Razón social</label><input id="s-rs" value="Empresa de Ejemplo SpA" placeholder="" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" /></div><div class=""><label for="s-rut" class="block text-sm font-medium mb-1.5">RUT</label><input id="s-rut" value="76.123.4567" placeholder="" aria-describedby="s-rut-e" aria-invalid="true" class="w-full h-11 px-4 rounded-lg border border-ccs-error-fill bg-ccs-error-soft bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-error dark:bg-ccs-dark-error-fill/10 dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" /><div id="s-rut-e" class="text-xs text-ccs-error mt-1.5 inline-flex items-center gap-1 dark:text-ccs-dark-error"><iconify-icon icon="solar:close-circle-bold" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon>Formato inválido: usa 76.123.456-7</div></div><div class=""><label for="s-mail" class="block text-sm font-medium mb-1.5">Correo</label><input id="s-mail" value="" placeholder="nombre@empresa.cl" aria-describedby="s-mail-e" aria-invalid="true" class="w-full h-11 px-4 rounded-lg border border-ccs-error-fill bg-ccs-error-soft bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-error dark:bg-ccs-dark-error-fill/10 dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" /><div id="s-mail-e" class="text-xs text-ccs-error mt-1.5 inline-flex items-center gap-1 dark:text-ccs-dark-error"><iconify-icon icon="solar:close-circle-bold" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon>Escribe un correo para enviarte la confirmación.</div></div><button type="submit"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm bg-ccs-blue text-white hover:bg-ccs-blue-mid shadow-ccs-sm dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue  active:scale-95 motion-reduce:active:scale-100">Enviar</button></form></div>
```

## Responsivo

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-2xl space-y-6"><div class="grid sm:grid-cols-[200px_1fr] gap-1.5 sm:gap-6 items-start"><div><label for="r-n" class="text-sm font-medium">Nombre</label><p class="text-xs text-ccs-slate dark:text-ccs-dark-text-2 mt-0.5">Como aparece en tu cédula.</p></div><input id="r-n" value="Carolina Rojas" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" /></div><div class="grid sm:grid-cols-[200px_1fr] gap-1.5 sm:gap-6 items-start"><div><label for="r-c" class="text-sm font-medium">Cargo</label><p class="text-xs text-ccs-slate dark:text-ccs-dark-text-2 mt-0.5">Se muestra en tu ficha.</p></div><input id="r-c" value="Jefa de ventas" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" /></div><div class="flex gap-2 sm:pl-[224px]"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm bg-ccs-blue text-white hover:bg-ccs-blue-mid shadow-ccs-sm dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue  active:scale-95 motion-reduce:active:scale-100">Guardar</button><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">Cancelar</button></div></div></div>
```

## Guía: Comportamiento

Al enviar con errores, el foco va al resumen (tabindex="-1"); cada enlace lleva al campo. Cada campo con error tiene aria-invalid y su mensaje en aria-describedby, junto con la ayuda. El resumen se arma con JS; sin JS, la validación del navegador marca el primer campo.
