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
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):
disabledes 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
dictatingdel MANIFIESTO.