Aithu · prototipo

Ficha

Categoría: Forms
Nivel: molécula
Estado: en revisión
Radix: no
Actualizado: 2026-10-26
Figma: 393:9466
Fuente: design-system/componentes/Field.md

Campo de texto en píldora con dictado (mic) y enviar: la pregunta al coach (Inicio y panel) y la respuesta al cliente simulado («Escribe o dicta tu respuesta…»). Descansa con borde tenue + Shadow/Card (excepción DV-10); hover oscurece el borde; foco = 2 px borders/brand/focus por dentro + anillo de 4 px al 20 %.

Cuándo usarlo

Texto libre al coach (Inicio, panel) y la respuesta al cliente en la simulación.

Cuándo NO usarlo

Inputs de formulario con etiqueta visible (login, registro) → TextField.

Anatomía

Píldora padding 12/12/12/20, gap 8: <textarea rows=1> que crece con el contenido · acciones: IconButton ghost «Dictar» (opcional) + IconButton primary «Enviar».

Props

Prop	Figma	Valores	Por defecto
`text`	Text	placeholder	Pregúntame algo…
`showMic`	Show mic	boolean	true
`disabled`	State=disabled	boolean	false
`dictating`	— (MANIFIESTO 23-oct: grabando = mic primary con Icon/square, enviar deshabilitado)	boolean	false
`value` / `onChange`	—	controlado	—
`onSend` / `onDictate`	—	callbacks	—
`label`	—	aria-label	Pregúntame algo

Estados

default · hover · focus (:focus-within) · filled (hay valor) · disabled (aria-disabled + lectura, sin opacidad) · dictating (solo código).

Accesibilidad

textarea con aria-label; Enter envía, Shift+Enter salto de línea; foco visible; mic y enviar son IconButton con su propio aria-label.
Deshabilitado con aria-disabled; durante la simulación el campo nunca se bloquea mientras el cliente responde (R-01.8): disabled es solo para errores.

Contenido

El placeholder invita («Pregúntame algo…», «Escribe o dicta tu respuesta…»), nunca es una instrucción con punto.

Errores conocidos

Ninguno medido (tests: Enter envía y Shift+Enter no; deshabilitado sin opacidad; sigue activo mientras el cliente responde).

Changelog

2026-10-26 · nace (T-02) con dictating del MANIFIESTO.