Input

Átomo · 17 variantes

Componentes de entrada de texto. El sistema define 2 component sets: Input text (14 variantes) y Search (3 variantes). Juntos cubren todos los escenarios de captura de información.

Input text — Estados

Default

Hover

Focus

Filled

Error

⚠

Este campo es requerido

Validated

✓

Valor validado correctamente

Disabled

TextArea

Search

Input de búsqueda con ícono integrado y radius infinity. 3 variantes: Default, Focus, Filled.

Anatomía del Input

Label

13px / 600. Siempre visible, nunca solo placeholder.

Container

Height 40px. Border 1px. Radius 8px.

Placeholder

14px / 400. Color neutral-400. Se oculta al escribir.

Helper / Error

12px bajo el input. Color según estado.

Reglas de uso

✓ Do

Siempre incluye un label visible — nunca confíes solo en el placeholder.

Muestra el estado Error con mensaje descriptivo debajo del campo.

Usa Search solo para entradas de búsqueda/filtro, no para formularios.

✕ Don't

No uses el placeholder como label — desaparece al escribir y afecta accesibilidad.

No mezcles estilos de input — usa los estados del sistema para todos los campos.

No uses border-radius mayor a 8px en inputs de formulario — solo Search usa radius-full.

Accesibilidad

Label con htmlFor

Todo input debe tener un <label> asociado mediante htmlFor + id.

Mensajes de error en aria-describedby

El texto de error debe estar referenciado con aria-describedby en el input.

Contraste de placeholder

El placeholder (#b0b0b8) cumple ratio 3.2:1 sobre fondo blanco — adecuado para texto no crítico.

Focus visible

El ring de focus (3px, color primary-100) supera el contraste mínimo de 3:1.

Tokens del componente

Token	Valor	Descripción
`--border-default`	#cbcbd1	Border estado Default
`--color-primary-700`	#2e7e62	Border estado Focus / Active
`--color-error`	#c0392b	Border estado Error
`--color-success`	#2e7e62	Border estado Validated
`--color-primary-100`	#dff8eb	Focus ring (box-shadow)
`height`	40px	Alto del input estándar
`--radius-sm`	8px	Border radius input
`--radius-full`	999px	Border radius Search