Selector + InputAmount

Selecciona la moneda y captura el monto en un único pill donde el formato del número responde a la moneda activa.

Cuándo usarla

• Formularios de pago donde el usuario puede pagar en varias monedas (USD, COP, EUR, etc.).
• Herramientas administrativas que crean cotizaciones o facturas con monedas múltiples.
• Cualquier escenario donde el rightOptions nativo de SInputAmount se queda corto: necesitas búsqueda, agrupación por región, opciones con icono o bandera.

Decisiones de diseño

Pegado visual

rounded="left" en el SSelector de moneda y rounded="right" en el SInputAmount. El SInputAmount envuelve internamente a SInput, así que las mismas reglas de altura y outline se aplican. Usa flex items-stretch para que la línea base del texto se mantenga alineada entre ambos.

Forma del v-model

Recomendado: dos refs (currency + amount) y no un objeto. El monto se emite como number | null (con lógica de vue-currency-input) y la moneda como código ISO 4217 — combinarlos en un objeto forzaría a serializar y deserializar en cada cambio. Si tu back-end espera { currency, amount }, constrúyelo al momento de enviar.

La prop currency del SInputAmount debe enlazarse al ref de moneda para que el formato se recalcule al cambiar.

Coordinación del error

• error en ambos si el monto viola un mínimo o máximo específico de la moneda elegida.
• error solo en el SInputAmount si el formato es inválido (caso raro, la máscara suele impedirlo) y la moneda es correcta.

Etiqueta y mensaje

Una sola SLabel "Monto a pagar" encima del pill. Debajo, un único mensaje describe el error en términos del combo ("El monto mínimo en USD es 10") en lugar de mensajes separados.

Accesibilidad

• id en el SInputAmount conectado al SLabel vía for.
• aria-describedby apuntando al error cuando exista.
• Tabulación: SSelector → SInputAmount. La lista de monedas debe ser navegable por teclado (el SSelector ya lo es).

Variantes

• Con bandera por moneda: el slot option de SSelector acepta un <img> o un emoji de bandera junto al código.
• Monedas agrupadas por región: usa optionGroupLabel y optionGroupItems para agrupar (LATAM, Europa, Asia).
• Sin selector (moneda fija): si el formulario trabaja con una sola moneda, usa SInputAmount solo con la prop symbol en lugar de esta receta.

Relacionado

• SSelector
• SInputAmount
• SLabel