componente · @solu30/ui-kit/input
ContactForm
Formulario de contacto que postea a un endpoint, con Turnstile y campo trampa opcionales.
1 sitio de import en 1 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- carlosmartinpavon
El componente, montado
Cargando el espécimen…
export function ContactFormSpecimen() {
return (
<Stage label="ContactForm · configurado por datos, con honeypot y sin captcha" tall wide>
<div className="w-full max-w-[560px]">
<ContactForm
fields={CAMPOS_CONTACTO}
endpoint="/kit/sin-backend"
honeypot
labels={{
submit: 'Enviar consulta',
sending: 'Enviando…',
success: 'Listo, te respondemos en el día.',
errors: {
rateLimit: 'Demasiados envíos seguidos. Probá en un rato.',
invalidEmail: 'Ese email no parece válido.',
captchaFailed: 'No pudimos verificar que no seas un robot.',
validation: 'Faltan datos obligatorios.',
generic: 'No se pudo enviar. Este formulario es una demostración: el endpoint no existe.',
},
}}
/>
</div>
</Stage>
)
}De specimens/input.tsx · ContactFormSpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.
Cómo se usa
import { ContactForm } from '@solu30/ui-kit/input'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| fields | sí | ContactFormField[] | — |
| endpoint | sí | string | — |
| labels | sí | ContactFormLabels | — |
| turnstile | opcional | { siteKey: string; scriptUrl?: string; } | — |
| honeypot | opcional | boolean | — |
| className | opcional | string | — |
| onSuccess | opcional | () => void | — |
| onError | opcional | (error: string) => void | — |