SimpleFormField

export function SimpleFormFieldSpecimen() {
  const [nombre, setNombre] = useState('Ofelia')
  const [email, setEmail] = useState('')

  return (
    <Stage label="SimpleFormField · la sección «Información personal» de Elliot" tall wide>
      <div className="w-full max-w-[460px] px-1 py-1">
        <div className="flex flex-col gap-4 rounded-xl border border-content/10 bg-container p-4 sm:p-5">
          <span className="text-sm font-semibold text-content">Información personal</span>

          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <SimpleFormField label="Nombre" required>
              <TextInput value={nombre} onChange={(e) => setNombre(e.target.value)} placeholder="Nombre" />
            </SimpleFormField>
            <SimpleFormField label="Apellidos">
              <TextInput defaultValue="Vera" placeholder="Apellidos" />
            </SimpleFormField>
          </div>

          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <SimpleFormField
              label="Email"
              required
              error={email.trim() === '' ? 'Sin email no se puede mandar la confirmación.' : undefined}
            >
              <TextInput
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Email"
              />
            </SimpleFormField>
            <SimpleFormField label="Teléfono" helpText="Con código de país, para WhatsApp.">
              <TextInput defaultValue="+54 351 555 0142" placeholder="Teléfono" />
            </SimpleFormField>
          </div>
        </div>
      </div>
    </Stage>
  )
}

De specimens/input.tsx · SimpleFormFieldSpecimen: 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.