Input Group

El componente Input Group permite añadir un prefijo (antes del input) y/o un sufijo (después del input) para proporcionar contexto visual adicional. Es útil para indicar unidades, monedas, protocolos, o cualquier información contextual.

Properties

Además de las propiedades comunes, el componente input-group acepta las siguientes propiedades específicas:

Basic Properties

Property	Type	Required	Default	Description
type	"input-group"	Yes	-	Especifica el tipo como input-group
prefix	string	No	-	Texto que se muestra antes del input (izquierda)
suffix	string	No	-	Texto que se muestra después del input (derecha)
placeholder	string	No	-	Texto placeholder del input
schema	z.ZodType	Yes	-	Esquema Zod para validación

Examples

Basic Input Group

Inputs con prefijo y sufijo

basic-input-group.tsx

import { createExampleForm } from "../createExampleForm";
import { z } from "zod";

export const BasicInputGroup = createExampleForm({
  formId: "basic-input-group",
  fields: {
    website: {
      type: "input-group",
      label: "Sitio web",
      prefix: "https://",
      placeholder: "ejemplo.com",
      schema: z.string().url("Debe ser una URL válida"),
      helperText: "Ingresa tu sitio web sin el protocolo",
    },
    weight: {
      type: "input-group",
      label: "Peso",
      suffix: "kg",
      placeholder: "70",
      schema: z.string().regex(/^\d+$/, "Solo números"),
      helperText: "Tu peso en kilogramos",
    },
    price: {
      type: "input-group",
      label: "Precio",
      prefix: "$",
      suffix: "USD",
      placeholder: "99.99",
      schema: z.string().regex(/^\d+\.?\d*$/, "Formato inválido"),
      helperText: "Precio en dólares",
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["website", "weight", "price"],
    },
  },
});

Casos de Uso Comunes

Prefijos (Prefix)

• URLs: https://, http://, www.
• Monedas: $, €, £, ¥
• Símbolos: @ (para emails o usuarios), # (para hashtags)
• Protocolos: ftp://, mailto:
• Prefijos telefónicos: +34, +1

Sufijos (Suffix)

• Unidades: kg, cm, m, px, %, °C, °F
• Extensiones: .com, .org, .net
• Monedas: USD, EUR, GBP
• Formatos: /mes, /año, /hora

Ejemplos de Configuración

Solo Prefijo

{
  type: "input-group",
  label: "Sitio web",
  prefix: "https://",
  placeholder: "ejemplo.com",
  schema: z.string().url("URL inválida")
}

Solo Sufijo

{
  type: "input-group",
  label: "Peso",
  suffix: "kg",
  placeholder: "70",
  schema: z.string().regex(/^\d+$/, "Solo números")
}

Prefijo y Sufijo

{
  type: "input-group",
  label: "Precio",
  prefix: "$",
  suffix: "USD",
  placeholder: "99.99",
  schema: z.string().regex(/^\d+\.?\d*$/, "Formato inválido")
}

Características

1. Contexto visual: El prefijo/sufijo proporciona contexto inmediato sobre el tipo de dato esperado
2. Validación separada: El valor del input no incluye el prefijo/sufijo, facilitando la validación
3. Estilizado automático: Los prefijos y sufijos tienen estilos consistentes (fondo muted, bordes)
4. Responsive: Se adapta correctamente en diferentes tamaños de pantalla
5. Accesible: Los prefijos/sufijos son decorativos y no interfieren con la accesibilidad

Best Practices

1. Usa para contexto claro: Solo añade prefijo/sufijo cuando añade valor real
2. Mantén corto: Los prefijos y sufijos deben ser cortos (1-5 caracteres idealmente)
3. Validación apropiada: Asegúrate de que tu validación Zod tenga en cuenta que el valor no incluye el prefijo/sufijo
4. Placeholder útil: Proporciona un placeholder que muestre el formato esperado
5. Consistencia: Usa el mismo estilo de prefijo/sufijo en toda la aplicación

Notas Técnicas

• El valor del campo solo incluye lo que el usuario escribe, no incluye el prefijo ni el sufijo
• Si necesitas el valor completo (con prefijo/sufijo), deberás concatenarlo en tu lógica de negocio
• El prefijo y sufijo son elementos decorativos y no se pueden seleccionar o editar
• El input mantiene todas las propiedades de un input de texto estándar (size, icon, etc.)

Ejemplo de Validación

{
  type: "input-group",
  label: "URL",
  prefix: "https://",
  placeholder: "ejemplo.com",
  schema: z.string()
    .min(1, "La URL es requerida")
    .regex(/^[a-z0-9-]+(\.[a-z0-9-]+)*$/i, "Formato de dominio inválido")
}

Accessibility

• El input group es automáticamente asociado con su etiqueta
• Los prefijos y sufijos son elementos decorativos y no interfieren con la accesibilidad
• Los mensajes de error son anunciados correctamente a los lectores de pantalla
• El componente sigue las mejores prácticas de ARIA
• La navegación por teclado está completamente soportada

Next Steps

• Input Component - Para inputs de texto estándar
• Form Layout Guide
• Validation Guide