# Campo con complementos

> Campo con ícono, texto fijo, botón, tecla, menú o spinner dentro del mismo borde, y área de texto con barra.

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

- Cuando un ícono, un texto fijo o un botón ayudan a entender o completar el dato.
- El texto fijo no reemplaza a la etiqueta.
- Un botón por campo, como máximo.

## Ícono al inicio

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-sm"><label for="ig-1" class="block text-sm font-medium mb-1.5">Buscar</label><div class="flex items-center w-full h-11 rounded-lg border border-ccs-line-strong bg-white focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25"><span class="pl-3 text-ccs-slate dark:text-ccs-dark-text-2"><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></span><input id="ig-1" type="search" placeholder="Busca por nombre o RUT" class="[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none flex-1 min-w-0 h-full bg-transparent px-3 text-sm text-ccs-ink outline-none placeholder:text-ccs-slate dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2" /></div></div></div>
```

## Ícono al final

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-sm"><label for="ig-2" class="block text-sm font-medium mb-1.5">Correo</label><div class="flex items-center w-full h-11 rounded-lg border border-ccs-line-strong bg-white focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25"><input id="ig-2" type="email" value="contacto@empresa.cl" class="flex-1 min-w-0 h-full bg-transparent px-3 text-sm text-ccs-ink outline-none placeholder:text-ccs-slate dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 pl-4" /><span class="pr-3 text-ccs-success dark:text-ccs-dark-success"><iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></span></div><div class="text-xs mt-1.5 text-ccs-slate dark:text-ccs-dark-text-2">Correo verificado.</div></div></div>
```

## Texto al inicio y al final

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-sm"><label for="ig-3" class="block text-sm font-medium mb-1.5">Monto</label><div class="flex items-center w-full h-11 rounded-lg border border-ccs-line-strong bg-white focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25"><span class="pl-4 text-sm text-ccs-slate dark:text-ccs-dark-text-2">$</span><input id="ig-3" inputmode="numeric" value="250.000" class="flex-1 min-w-0 h-full bg-transparent px-3 text-sm text-ccs-ink outline-none placeholder:text-ccs-slate dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2" /><span class="pr-4 text-sm text-ccs-slate dark:text-ccs-dark-text-2">CLP</span></div></div><div class="w-full max-w-sm"><label for="ig-4" class="block text-sm font-medium mb-1.5">Sitio web</label><div class="flex items-center w-full h-11 rounded-lg border border-ccs-line-strong bg-white focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25"><span class="pl-4 text-sm text-ccs-slate dark:text-ccs-dark-text-2">https://</span><input id="ig-4" value="miempresa" class="flex-1 min-w-0 h-full bg-transparent px-3 text-sm text-ccs-ink outline-none placeholder:text-ccs-slate dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 px-1" /><span class="pr-4 text-sm text-ccs-slate dark:text-ccs-dark-text-2">.cl</span></div></div></div>
```

## Botón

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-sm"><label for="ig-5" class="block text-sm font-medium mb-1.5">Enlace de invitación</label><div class="flex items-center w-full h-11 rounded-lg border border-ccs-line-strong bg-white focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25"><input id="ig-5" readonly value="https://ejemplo.cl/i/4kd9" class="flex-1 min-w-0 h-full bg-transparent px-3 text-sm text-ccs-ink outline-none placeholder:text-ccs-slate dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 pl-4" /><span class="pr-1.5"><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-8 px-3 text-sm text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover  active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:copy-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon>Copiar</button></span></div></div><div class="w-full max-w-sm"><label for="ig-6" class="block text-sm font-medium mb-1.5">Clave</label><div class="flex items-center w-full h-11 rounded-lg border border-ccs-line-strong bg-white focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25"><input id="ig-6" type="password" value="12345678" class="flex-1 min-w-0 h-full bg-transparent px-3 text-sm text-ccs-ink outline-none placeholder:text-ccs-slate dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 pl-4" /><span class="pr-1"><button type="button" aria-label="Mostrar clave"  class="inline-grid place-items-center w-9 h-9 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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  active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:eye-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button></span></div></div></div>
```

## Tecla

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-sm"><label for="ig-7" class="block text-sm font-medium mb-1.5">Buscar en el sitio</label><div class="flex items-center w-full h-11 rounded-lg border border-ccs-line-strong bg-white focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25"><span class="pl-3 text-ccs-slate dark:text-ccs-dark-text-2"><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></span><input id="ig-7" placeholder="Buscar…" aria-keyshortcuts="Control+K Meta+K" class="peer flex-1 min-w-0 h-full bg-transparent px-3 text-sm text-ccs-ink outline-none placeholder:text-ccs-slate dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2" /><span aria-hidden="true" class="pr-3 hidden gap-1 peer-focus:!hidden [@media(hover:hover)_and_(pointer:fine)]:peer-placeholder-shown:flex"><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">Ctrl</kbd><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">K</kbd></span></div></div></div>
```

## Cargando

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-sm"><label for="ig-8" class="block text-sm font-medium mb-1.5">Empresa</label><div class="flex items-center w-full h-11 rounded-lg border border-ccs-line-strong bg-white focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25"><input id="ig-8" value="Comercial An" class="flex-1 min-w-0 h-full bg-transparent px-3 text-sm text-ccs-ink outline-none placeholder:text-ccs-slate dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 pl-4" /><span class="pr-3 flex items-center gap-2 text-xs text-ccs-slate dark:text-ccs-dark-text-2"><span class="inline-block w-4 h-4 shrink-0 rounded-full border-2 border-ccs-line border-t-ccs-blue animate-spin dark:border-ccs-dark-line dark:border-t-ccs-dark-accent" aria-hidden="true"></span>Buscando…</span></div></div></div>
```

## Menú

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-sm"><label for="ig-9" class="block text-sm font-medium mb-1.5">Documento</label><div class="flex items-center w-full h-11 rounded-lg border border-ccs-line-strong bg-white focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25"><button type="button" aria-haspopup="menu" class="h-full inline-flex items-center gap-1 pl-4 pr-3 text-sm font-medium border-r border-ccs-line-strong dark:border-ccs-dark-line-strong rounded-l-lg hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover 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<iconify-icon icon="solar:alt-arrow-down-outline" class="shrink-0 text-[16px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon></button><input id="ig-9" placeholder="12.345.678-9" class="flex-1 min-w-0 h-full bg-transparent px-3 text-sm text-ccs-ink outline-none placeholder:text-ccs-slate dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2" /></div></div></div>
```

## Área de texto con barra

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-md"><label for="ig-10" class="block text-sm font-medium mb-1.5">Consulta</label><div class="rounded-lg border border-ccs-line-strong bg-white focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25"><textarea id="ig-10" rows="3" placeholder="Escribe tu consulta…" class="block w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-ccs-slate dark:placeholder:text-ccs-dark-text-2"></textarea><div class="flex items-center gap-2 px-2 pb-2"><button type="button" aria-label="Adjuntar archivo"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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  active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:paperclip-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><span class="ml-auto text-xs text-ccs-slate dark:text-ccs-dark-text-2">0 / 500</span><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-8 px-3 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<iconify-icon icon="solar:arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div></div></div></div>
```

## Etiqueta adentro

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-sm rounded-lg border border-ccs-line-strong bg-white px-4 pt-2 pb-1 focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25"><label for="ig-11" class="block text-xs font-medium text-ccs-slate dark:text-ccs-dark-text-2">Nombre de la empresa</label><input id="ig-11" value="Empresa de Ejemplo SpA" class="w-full h-8 bg-transparent text-sm outline-none" /></div></div>
```

## Guía: Accesibilidad

El <label> apunta al <input>, no al grupo. Los íconos decorativos llevan aria-hidden; los botones solo ícono, aria-label. Un texto fijo que cambia el sentido del dato ("$", "CLP") se repite en la etiqueta o en la ayuda, porque el lector de pantalla no lo lee como parte del campo.
