Selector + Input

Captura un tipo de identificación (CC, CE, TI, NIT, Pasaporte) y su número como si fueran un solo campo de formulario.

Cuándo usarla

• Registro o perfil de usuarios donde el tipo condiciona la validación del número.
• Cualquier combo "categoría + valor" donde el selector elige un pequeño conjunto de opciones y el input captura el dato principal (tipo de impuesto + monto base, código de producto + cantidad, etc.).
• Cuando las opciones de tipo de documento son objetos (con label y code) y necesitas el poder de SSelector: búsqueda, grupos, carga, estado de limpieza.

Decisiones de diseño

Pegado visual

El pegado es puramente tipográfico: rounded="left" en el SSelector y rounded="right" en el SInput. Ambos comparten la misma altura (h-9) porque usan el mismo token inputStyle.root. El contenedor es un flex items-stretch para que los bordes inferiores queden alineados incluso cuando el navegador aplica autofill.

Forma del v-model

Recomendado: un único objeto { type, number } enlazado como v-model del combo. El tipo y el número forman una unidad de datos y rara vez viajan separados al back-end. Enlazarlos como un solo objeto deja claro que son inseparables.

Alternativa aceptable: dos refs independientes (type, number) si el formulario que los envuelve ya trabaja con campos planos. En ese caso, combínalos en una función submit antes de despachar.

Coordinación del error

Si la validación de la combinación falla (por ejemplo, número inválido para el tipo elegido), pasa error a ambos componentes. La regla: el combo se presenta como un único pill, así que un pill "medio rojo" se lee como un bug de render. El consumidor mantiene un hasError computado único y lo pasa a los dos hijos.

Etiqueta y mensaje

Un solo SLabel encima del combo (no uno por componente) y un solo mensaje de error debajo. Esto respeta que el combo es una sola pregunta ("¿cuál es tu documento?"), no dos.

Accesibilidad

• El SInput lleva el id referenciado por el SLabel mediante for. El SSelector hereda su etiqueta a través de la cercanía y la relación visual.
• Cuando el combo muestra un error, añade aria-describedby en el SInput apuntando al id del párrafo de error.
• El orden natural de tabulación es: SSelector → SInput. No lo alteres con tabindex.

Variantes

• Con búsqueda: si tu lista de tipos supera ~8 entradas (empresas grandes con muchos tipos tributarios), activa search en SSelector.
• Con iconos por tipo: usa el slot option de SSelector para renderizar un icono o bandera junto a cada tipo. El botón cerrado se conserva compacto si optionLabel apunta al código corto.
• Tipos asíncronos: carga los tipos con fetch en onMounted y muestra loading en SSelector mientras llegan los datos.

Relacionado

• SSelector
• SInput
• SLabel